学步园

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

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

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

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

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

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