Created
August 21, 2010 02:53
-
-
Save leandrosilva/d43d3764a67f62018fef to your computer and use it in GitHub Desktop.
Comet is dead long live websockets
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| This code was copied-pasted from a Joe Armstrong's blog post at: | |
| Comet is dead long live websockets | |
| http://armstrongonsoftware.blogspot.com/2009/12/comet-is-dead-long-live-websockets.html |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src='/include/jquery-1.3.2.min.js'></script> | |
| <script> | |
| $(document).ready(function(){ | |
| var ws; | |
| if ("WebSocket" in window) { | |
| debug("Horray you have web sockets | |
| Trying to connect..."); | |
| ws = new WebSocket("ws://localhost:1234/websession"); | |
| ws.onopen = function() { | |
| // Web Socket is connected. You can send data by send() method. | |
| debug("connected..."); | |
| ws.send("hello from the browser"); | |
| ws.send("more from browser"); | |
| }; | |
| run = function() { | |
| var val=$("#i1").val(); // read the entry | |
| $("#i1").val(""); // and clear it | |
| ws.send(val); // tell erlang | |
| return true; // must do this | |
| }; | |
| ws.onmessage = function (evt) | |
| { | |
| var data = evt.data; | |
| var i = data.indexOf("!"); | |
| var tag = data.slice(0,i); | |
| var val = data.slice(i+1); | |
| $("#" + tag).html(val); | |
| }; | |
| ws.onclose = function() | |
| { | |
| debug(" socket closed"); | |
| }; | |
| } else { | |
| alert("You have no web sockets"); | |
| }; | |
| function debug(str){ | |
| $("#debug").append("<p>" + str); | |
| }; | |
| }); | |
| <body> | |
| <h1>Interaction experiment</h1> | |
| <h2>Debug</h2> | |
| <div id="debug"></div> | |
| <fieldset> | |
| <legend>Clock</legend> | |
| <div id="clock">I am a clock</div> | |
| </fieldset> | |
| <fieldset> | |
| <legend>out</legend> | |
| <div id="out">Output should appear here</div> | |
| </fieldset> | |
| <p>Enter something in the entry below, | |
| the server will reverse the string and send it to the | |
| out region above</p> | |
| <fieldset> | |
| <legend>entry</legend> | |
| <P>Enter: <input id="i1" onchange="run()" size ="42"></p> | |
| </input> | |
| </fieldset> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| -module(local_server). | |
| -compile(export_all). | |
| %% start() | |
| %% This should be in another module for clarity | |
| %% but is included here to make the example self-contained | |
| start() -> | |
| F = fun interact/2, | |
| spawn(fun() -> start(F, 0) end). | |
| interact(Browser, State) -> | |
| receive | |
| {browser, Browser, Str} -> | |
| Str1 = lists:reverse(Str), | |
| Browser ! {send, "out ! " ++ Str1}, | |
| interact(Browser, State); | |
| after 100 -> | |
| Browser ! {send, "clock ! tick " ++ integer_to_list(State)}, | |
| interact(Browser, State+1) | |
| end. | |
| start(F, State0) -> | |
| {ok, Listen} = gen_tcp:listen(1234, [{packet,0}, | |
| {reuseaddr,true}, | |
| {active, true}]), | |
| par_connect(Listen, F, State0). | |
| par_connect(Listen, F, State0) -> | |
| {ok, Socket} = gen_tcp:accept(Listen), | |
| spawn(fun() -> par_connect(Listen, F, State0) end), | |
| wait(Socket, F, State0). | |
| wait(Socket, F, State0) -> | |
| receive | |
| {tcp, Socket, Data} -> | |
| Handshake = | |
| [ | |
| "HTTP/1.1 101 Web Socket Protocol Handshake\r\n", | |
| "Upgrade: WebSocket\r\n", | |
| "Connection: Upgrade\r\n", | |
| "WebSocket-Origin: http://localhost:2246\r\n", | |
| "WebSocket-Location: ", | |
| " ws://localhost:1234/websession\r\n\r\n" | |
| ], | |
| gen_tcp:send(Socket, Handshake), | |
| S = self(), | |
| Pid = spawn_link(fun() -> F(S, State0) end), | |
| loop(zero, Socket, Pid); | |
| Any -> | |
| io:format("Received:~p~n",[Any]), | |
| wait(Socket, F, State0) | |
| end. | |
| loop(Buff, Socket, Pid) -> | |
| receive | |
| {tcp, Socket, Data} -> | |
| handle_data(Buff, Data, Socket, Pid); | |
| {tcp_closed, Socket} -> | |
| Pid ! {browser_closed, self()}; | |
| {send, Data} -> | |
| gen_tcp:send(Socket, [0,Data,255]), | |
| loop(Buff, Socket, Pid); | |
| Any -> | |
| io:format("Received:~p~n",[Any]), | |
| loop(Buff, Socket, Pid) | |
| end. | |
| handle_data(zero, [0|T], Socket, Pid) -> | |
| handle_data([], T, Socket, Pid); | |
| handle_data(zero, [], Socket, Pid) -> | |
| loop(zero, Socket, Pid); | |
| handle_data(L, [255|T], Socket, Pid) -> | |
| Line = lists:reverse(L), | |
| Pid ! {browser, self(), Line}, | |
| handle_data(zero,T, Socket, Pid); | |
| handle_data(L, [H|T], Socket, Pid) -> | |
| handle_data([H|L], T, Socket, Pid); | |
| handle_data([], L, Socket, Pid) -> | |
| loop(L, Socket, Pid). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment