From: Avinash D. <tri...@gm...> - 2014-08-04 14:07:18
|
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); The browser's network logs show following: 1. Remote Address: 127.0.0.1:8081 2. Request URL: http://localhost:8081/ 3. Request Method: GET 4. Status Code: 400 Bad Request 5. Request Headersview parsed 1. GET / HTTP/1.1 Host: localhost:8081 Connection: keep-alive Cache-Control: no-cache Pragma: no-cache Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 User-Agent: Mozilla/5.0 (Windows NT 6.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36 Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8,hi;q=0.6,mr;q=0.4 6. Response Headersview parsed 1. HTTP/1.1 400 Bad Request Connection: close |
From: Christopher F. <chr...@ca...> - 2014-08-05 08:48:26
Attachments:
signature.asc
|
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 |
From: Avinash D. <tri...@gm...> - 2014-08-05 11:32:18
|
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 <chr...@ca...> 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 > Erl...@li... > https://lists.sourceforge.net/lists/listinfo/erlyaws-list > > |