Thank you, Sir! It would have never occurred to me that it was this way (as you explained) that one has to upgrade from HTTP to WebSocket protocol, in spite of reading so many examples and running the demos. 

Let's see how the bytes of integers and character-strings of varying sizes packed & sent from Erlang get represented in JavaScript, and vice versa. 

Fingers crossed and the fun begins.

Thanks once again!


On 5 August 2014 14:18, Christopher Faulet <christopher.faulet@capflam.org> wrote:
On 04/08/2014 16:07, Avinash Dhumane wrote:
> Hi!
>
> I have latest Erlang and Yaws on my Windows box.
>
> I am a first time JavaScript programmer, and I have never programmed a
> browser or HTTP applications before (and, therefore, not used web
> servers either).
>
> The task at my hand is to build web browser based user interface to an
> algorithmic trading application (which I have written in Erlang).
>
> I am trying to exchange raw bytes (binary payload) to/from JavaScript
> client inside Chrome browser over WebSocket API. And, I don't understand
> what I have done wrong (in the arrangements and contents of various
> files described below) to earn the error "Invalid Connection Header"
> found in the Yaws' logs. Please help me understand. Thanks.
>
> I picked up the example code from Yaws' user guide, and augmented it as
> follows (last 5 lines), and kept in a index.yaws file in the 'docroot'
> directory:
>
> <html>
>   <p> First paragraph
>   <erl>
>   out(Arg) ->
>   {html, "<p>This string gets inserted into HTML document dynamically"}.
>   </erl>
>   <p> And here is some more HTML code
>   <script src="ws_echo.js"></script>
>   <div id="output"></div>
>   <erl>
>     out(Arg) -> {websocket, ws_echo, []}.
>   </erl>
> </html>
>
> The ws_echo.erl module is as follows, and compiled it, and kept it in
> the 'ebin' directory:
>
> -module(ws_echo).
> -compile(export_all).
>
> handle_open(WSState, _State) ->
>   yaws_api:websocket_send(WSState, {text, <<"Hi from YAWS WebSocket">>}),
>   {ok, {}}.
> handle_message({_, Data}, _State) ->
>   io:format("~p~n", [Data]),
>   {noreply, {}}.
>
> The ws_echo.js JavaScript program is kept at 'docroot' and has following
> code:
>
> var wsUri = "ws://localhost:8081/";
> var output;
> function init() {
>   output = document.getElementById("output");
>   testWebSocket();
> }
> function testWebSocket() {
>   websocket = new WebSocket(wsUri);
>   websocket.onopen = function(evt) { onOpen(evt) };
>   websocket.onclose = function(evt) { onClose(evt) };
>   websocket.onmessage = function(evt) { onMessage(evt) };
>   websocket.onerror = function(evt) { onError(evt) };
> }
> function onOpen(evt) { writeToScreen("CONNECTED"); doSend("WebSocket
> rocks"); }
> function onClose(evt) { writeToScreen("DISCONNECTED"); }
> function onMessage(evt) { writeToScreen('<span style="color:
> blue;">RESPONSE: ' + evt.data+'</span>'); websocket.close(); }
> function onError(evt) { writeToScreen('<span style="color:
> red;">ERROR:</span> ' + evt.data); }
> function doSend(message) { writeToScreen("SENT: " + message);
>  websocket.send(message); }
> function writeToScreen(message) {
>   var pre = document.createElement("p");
>   pre.style.wordWrap = "break-word";
>   pre.innerHTML = message;
>   output.appendChild(pre);
> }
> window.addEventListener("load", init, false);
>

Hi,

You cannot mix HTTP and WebSocket. The WebSocket protocol uses the HTTP
upgrade system to "upgrade" an HTTP connection to a WebSocket
connection. So you need to move the erlang part from your index.yaws
into another yaws script (maybe ws_echo.yaws) and change wsUri to point
on it in ws_echo.js.

See http://yaws.hyber.org/websockets.yaws for details about WebSocket
implementation in Yaws and following files as example:

* https://github.com/klacke/yaws/blob/master/www/websockets_example.yaws
*
https://github.com/klacke/yaws/blob/master/www/websockets_example_endpoint.yaws
*
https://github.com/klacke/yaws/blob/master/examples/src/basic_echo_callback.erl

--
Christopher


------------------------------------------------------------------------------
Infragistics Professional
Build stunning WinForms apps today!
Reboot your WinForms applications with our WinForms controls.
Build a bridge from your legacy apps to the future.
http://pubads.g.doubleclick.net/gampad/clk?id=153845071&iu=/4140/ostg.clktrk
_______________________________________________
Erlyaws-list mailing list
Erlyaws-list@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/erlyaws-list