Websocket Server in a Patch
(new version requiring only mrpeach external library)
As its name implies, this single 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 specific external to compile. Since it access network through [mrpeach/tcpserver] external, you'll only need to add mrpeach library via 'Help->Find externals' menu (you can also use [iemnet/tcpserver] provided by iemnet library instead).
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.
Please be kind enough to let me know of your eventual works based on it and, at the very least, respect the license (otherwise you'll be cursed for seven generations, or just punched in the nose).
MINI TUTORIAL (slider updated!) :
No need to be a jquarry-braindead-webdev to play with websockets, and for those who would like a very simple (but rewarding) example of html/javascript code and pd patching to get started, here is a way to make your very first steps with the server :
1) resize the main window in order to get more space to add the objects used with this example (don't remove anything, although the demo and everything under [pd text2pdmessage] isn't necessary).
2) add an [hslider] gui object then open it's Properties (with a right-clik on it) and in Messages section, add "slider-send" in Send symbol, and "slider-recv" in Receive symbol (don't type the quotes...) then finally click OK.
3) copy/paste this code in a notepad, or any editor in raw text mode, and save it :
<html><body><script>var websocket=new WebSocket('ws://localhost:9998');
websocket.onmessage=function(event){document.forms[0].slider.value=event.data;};</script>
<form><input name="slider" type="range" max="127" onInput="websocket.send('; slider-recv '+(this.value))">
</form></body></html>
4) rename the resulting file with a .html extension then open it in a web browser (Firefox, Safari or Chrome will do) on same machine. You should get a '1' value from 3rd outlet of [pd websocket-server] as soon as the page is loaded.
5) now look at the slider in Pd while moving the slider in your browser
6) to do the same thing in the opposite direction, add the following objects somewhere on the patch, connected top to bottom in that order : [toggle] gui object, [metro 50], [value slider-send], [change], [makefilename %d],[list fromsymbol], and finally [list prepend broadcast text] itself connected to the first inlet of [pd websocket-server] (that is the main subpatch containing the server, found near the top of main window)
7) check the toggle to start the [metro] and you should now be able to move any slider and get them all in sync, meaning the one in Pd as well as those in all browser windows that have your html file loaded ! And you can still use the 'flames' demo seamlessly while doing this :)
To go further, make your browser display the demo webpage source code to see how the things are handled, and check the Websocket API documentation available online.
(Websocket Server in a Patch (c) 2016 by Nicolas Lhommet - CC BY-NC-SA 4.0)
