很早开始就想用WebSocket完成即时消息推送功能。之前本打算用WebSocket + C#实现的，结果人上了年纪变笨了，弄了一天也没弄好 ⊙﹏⊙
今天参考了几篇资料，终于搞定了一个Socket.IO结合nodeJs的Demo。
用Socket.IO有个很大的好处就是开发者不需要去关心浏览器差异。Chrome下会用WebSocket，如果是用的IE它就会轮询。
nodeJs的环境搭建之类的知识这里就不提了，暂提供一个入门的文章: Node入门 ,Socket.IO的官网
再推荐一篇不错的外文：Comet and Socket.io deployment
后台代码 server.js
var fs = require('fs'), http = require('http'), sio = require('socket.io'); var server = http.createServer(function(req, res) { res.writeHead(200, { 'Content-type': 'text/html' }); res.end(fs.readFileSync('./index.htm')); }); server.listen(8888, function() { console.log('Server listening at http://localhost:8888/'); }); // Attach the socket.io server io = sio.listen(server); // store messages var messages = []; // Define a message handler io.sockets.on('connection', function(socket) { socket.on('message', function(msg) { console.log('Received: ', msg); messages.push(msg); socket.broadcast.emit('message', msg); }); // send messages to new clients messages.forEach(function(msg) { socket.send(msg); }) });
前台代码 index.htm
<html> <head> <style type="text/css"> #messages { padding: 0px; list-style-type: none;} #messages li { padding: 2px 0px; border-bottom: 1px solid #ccc; } </style> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script> $(function() { var socket = io.connect(); socket.on('connect', function() { socket.on('message', function(message) { $('#messages').append($('<li></li>').text(message)); }); socket.on('disconnect', function() { $('#messages').append('<li>Disconnected</li>'); }); }); var el = $('#chatmsg'); $('#chatmsg').keypress(function(e) { if (e.which == 13) { e.preventDefault(); socket.send(el.val()); $('#messages').append($('<li></li>').text(el.val())); el.val(''); } }); }); </script> </head> <body> <ul id="messages"></ul> <hr> <input type="text" id="chatmsg"> </body> </html>
运行方法
- 在命令行输入 node server.js 打开服务器
- 打开两个页面，分别输入地址 http://localhost:8888/
注意一点：在index.htm中引用了一个文件"/socket.io/socket.io.js"，这个是由后台的Socket.IO模块自动提供的，我们不需要去管它。
在Socket.IO官网给的例子里，没有说明这里点，害得我乱折腾一天也没明白，直到看到上面的那篇外文才明白。。。
这个小Demo连聊天室都算不上，只是完成了即时信息推送而已。接下来有时间了再继续完善吧！