pure-data : WEBSOCKET-SERVER IN A PATCH pour Pd-extended + demo

Nicolas Lhommet · 2014-01-18 19:24:12

Ce patch pd (en un seul fichier) contient un serveur "websocket" réutilisable et entièrement documenté, permettant d'expérimenter facilement avec les communications entre Pd et les navigateurs web par l'intermédiaire des Websockets (et sans besoin d'autre logiciel, ou de compiler un 'external').

Une démo est intégrée au patch : 'Flames', une simple interface graphique 'multi-touch', multi-joueurs (et compatble avec la plupart des navigateurs) qui fait générer des sons moches à Pd et son code javascript pour les websockets est également documenté.

Essayez-le : ouvrez le fichier avec with Pd-extended 0.43.4 sur Windows, Mac ou Linux, lancez un ou plusieurs navigateurs internet récents (sur le même pc, ou sur d'autres pc, smartphones ou tablettes sur le même réseau local) en mettant l'adresse indiquée dans la fenêtre principale du patch, et ça devrait être bon !

N'hésitez pas à l'améliorer et à me tenir au courant de vos éventuels projets basés sur ce patch.

DOWNLOAD : http://sourceforge.net/projects/websock … tch/files/

(j'ai posté plus bas un petit tuto de base pour le serveur, et qui ne devrait plus comporter d'erreur maintenant...)

Dernière modification par Nicolas Lhommet (2015-01-16 01:53:04)

dwan · 2014-01-18 21:48:06

Super boulot !

J'ai plus qu'à éplucher le patch pour piger comment ça marche :p

Nicolas Lhommet · 2014-01-18 22:24:06

Merci !

Pour ceux qui veulent faire leur propre page (je réalise que le code javascript de la démo est un peu chargé), voici comment faire ses tous premiers pas avec le serveur :

1) dans la fenêtre principale, retirer toute la démo en bas ([pd flames-demo-webapp], sa description, la sortie son [pd output~] et le tableau 'waveform')

2) brancher un objet [print] à la sortie de [tof/from_ascii_code -1], en bas

3) créer, reliés dans cet ordre de haut en bas : un message [hello( , un objet [tof/to_ascii_code] et un objet [list prepend broadcast text] lui-même relié au premier 'inlet' de [pd websocket-server]

4) taper le code suivant dans un bloc-note (ou un éditeur en mode texte brut) et enregistrez-le :

<html><body><script>
var websocket=new WebSocket('ws://127.0.0.1:9998');
websocket.onmessage=function(event){websocket.send(event.data+"!!!");};
</script></body></html>

5) renommez le fichier obtenu avec l'extension .html puis ouvrez le dans un navigateur sur la même machine. Il n'affichera rien (c'est normal) mais vous devriez alors avoir le chiffre 1 à la sortie du troisième 'outlet' de [pd websocket-server]

Voilà, quand vous cliquez sur le message [hello( , le navigateur renvoie "hello!!!" qui s'affichera dans la console de Pd. Pour commencer, vous pouvez déjà remplacer 'hello' par autre chose...

Vous pouvez ensuite modifier le code javascript (pensez à bien rafraîchir la page du navigateur une fois enregistré le fichier .html mis à jour).

Si vous comprenez comment marche ce petit bout de code javascript, alors vous savez l'essentiel et il ne vous reste plus qu'à faire une page web plus intéressante

Dernière modification par Nicolas Lhommet (2014-01-19 13:00:36)

nononononono · 2014-01-25 18:15:56

Super, j'adore le websocket !
Dis Nicolas, tu as une idée pour appliquer ceci sur le net et non en local?
J'ai toujours des pbs avec ça, moi...

Nicolas Lhommet · 2014-01-26 06:40:04

@nononononono : je viens de tester, le patch marche sans problème via Internet. Bien sûr, comme pour tout serveur, le port utilisé (idéalement le port 80, pour passer les pare-feux côté client) doit être à la fois ouvert sur la machine qui le fait tourner, et correctement "forwardé" au niveau des réglages du pare-feu du routeur local.

Cependant de nombreux serveurs "proxy" (qui peuvent interférer à un niveau ou un autre de la liaison) sont encore incompatibles avec les connections Websockets non-cryptées. Pour palier à ce problème l'usage du protocole HTTPS (qui n'est pas géré par mon patch) est préconisé, voir :

http://en.wikipedia.org/wiki/WebSocket (à la rubrique "Proxy traversal")

http://www.infoq.com/articles/Web-Sockets-Proxy-Servers

philippe boisnard · 2014-01-26 09:34:50

beau travail. un grand merci.

Annonce

#1 2014-01-18 19:24:12 WEBSOCKET-SERVER IN A PATCH pour Pd-extended + demo

WEBSOCKET-SERVER IN A PATCH pour Pd-extended + demo

#2 2014-01-18 21:48:06 Re : WEBSOCKET-SERVER IN A PATCH pour Pd-extended + demo

Re: WEBSOCKET-SERVER IN A PATCH pour Pd-extended + demo

#3 2014-01-18 22:24:06 Re : WEBSOCKET-SERVER IN A PATCH pour Pd-extended + demo

Re: WEBSOCKET-SERVER IN A PATCH pour Pd-extended + demo

#4 2014-01-25 18:15:56 Re : WEBSOCKET-SERVER IN A PATCH pour Pd-extended + demo

Re: WEBSOCKET-SERVER IN A PATCH pour Pd-extended + demo

#5 2014-01-26 06:40:04 Re : WEBSOCKET-SERVER IN A PATCH pour Pd-extended + demo

Re: WEBSOCKET-SERVER IN A PATCH pour Pd-extended + demo

#6 2014-01-26 09:34:50 Re : WEBSOCKET-SERVER IN A PATCH pour Pd-extended + demo

Re: WEBSOCKET-SERVER IN A PATCH pour Pd-extended + demo

Pied de page des forums