html5+webSocket+node.js的页面聊天应用

网路上的很多例子都是使用的 npm安装的node.js的webSocket-server模块，不过今天下午我有编译了好几次都编译不成功，git到以后也很悲剧的不能用，不过最后在一个老外的博客上找到了个ws.js可以用来建立node.js的websocket的服务器，这样就可以链接服务器通过webSocket长链接进行会话了，中间经历了比较多的东西，而且这是自己第一次编写webSocket的小应用，感觉html5实在是强大，不过js实在是很难调试，我都感觉崩溃了，而且崩溃了好多次。

 

var sys = require("sys"), ws = require("./ws"); var socketPool = []; var server = ws.createServer(function(socket) { socket.addListener("connect", function(res) { sys.puts("client connected from：" + socket.remoteAddress + "" + res); socket.write("welcome/r/n"); socketPool.push(this); }); socket.addListener("data", function(data) { for (var i = 0, len = socketPool.length; i < len; i++) { socketPool[i].write(data); } }); socket.addListener("close", function() { sys.puts("client close!"); for (var i = 0, len = socketPool.length; i < len; i++) { if (this == socketPool[i]) { socketPool.splice(i, 1); break; } } }); }); server.listen(8082); 

上面是node.js服务器端的程序，很简单，只是广播链接而得到的数据，如果你已经装上了 webSocket-Server的话，可以用另一个方法制作服务器。

 

var ws; $(document).ready(function () { if ("WebSocket" in window) { debug('WebScoket chat room use nodejs and html5 designed by Youngershen','success'); connect($('#inputName').val()); alert($('#inputName').val()); $('#link').removeAttr('disabled'); } else { debug("Browser does not support web sockets", 'error'); }; function ws_send(str) { try { ws.send(str); } catch (err) { debug(err, 'error'); } } function connect(host) { debug("Connecting to " + host + " ..."); try { ws = new WebSocket(host); } catch (err) { debug(err, 'error'); } $('#inputName').attr('disabled', true); ws.onopen = function () { debug("connected... ", 'success'); }; ws.onmessage = function (evt) { debug(evt.data, 'response'); }; ws.onclose = function () { debug("Socket closed!", 'error'); $('#inputName').attr('disabled', false); }; }; function debug(msg, type) { $("#showMessageArea").append('<p class="' + (type || '') + '">' + msg + '</p>'); }; $('#link').click(function () { debug("/n"); connect($('#inputName').val()); }); $('#sendButton').click(function () { var s =$('#inputName2').val()+":"+$('#messageInputArea').val(); ws_send(s); }); $('#console_input').keyup(function (e) { if(e.keyCode == 13) ws_send($('#console_input').val()); }); }); 

 

上面的是 client.js的程序，主要是操作html元素，应该很容易看懂，

最后上一张图，忙了半天。