WEBSOCKET-SERVER IN A PATCH for Pd-extended (with demo)

Guest

This single pd patch file contains a reusable and fully documented websocket server, meant as an easy way to experiment with Pd<->web-browsers communications through websockets, without the need of other software or any external to compile.

A demo is included in the same patch : 'Flames', a simple cross-browser, multi-touch and multi-player graphical interface which makes Pd play creepy sounds and its javascript code for websockets is also documented.

Just try it : open it with Pd-extended 0.43.4 on Windows, Mac or Linux, fire any recent web-browsers (on same machine or other computer, smartphone or tablet on same local network) with the URL provided in the main window, and you're good to go !

Feel free to improve it and to let me know of eventual projects based on it.

(i've added a basic tutorial in a post below)

http://www.pdpatchrepo.info/hurleur/websocket-server-in-a-patch.pd

onyxashanti

I look forward to trying this out!! thanks!! i will let you know how it works out

Gromit

Wow, really cool stuff!

That's it for building nice GUI's for pd like that:
http://kievii.net/index.html#

Guest

Thanks !

For those who want to make their own webpage (i realize that the demo's javascript code is a bit difficult to navigate), here is how to make the very first steps with the server :

remove all the demo at the bottom of main window ([pd flames-demo-webapp] and description, [pd output~] and the 'waveform' table)
connect a [print] object to the output of lowest object [tof/from_ascii_code -1]
create, connected top to bottom in that order : message [hello( , object [tof/to_ascii_code], and an object

itself connected to first inlet of [pd websocket-server]

type this code in a notepad (or any editor in raw text mode) et save it :

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

rename the resulting file with a .html extension then open it in a web browser on same machine. Nothing is displayed (this is normal) but you should get a '1' value from 3rd outlet of [pd websocket-server]

Now, when you click on [hello( message, the browser should return a message 'hello!!!', printed in Pd console. You may start by replacing 'hello' by another message...

Then you can try to modify the javascript code (just remember to refresh the webpage in browser once you have saved your modified .html file)

If you understand how this tiny piece of javascript works, then you have the basics to make a more interesting web page

Gromit

I also found this:
https://github.com/automata/osc-web
It's a Demo with a node.js (proxy) in between.

Your guess-local-ip part is a neat trick!
cheers