通过Socket.IO与nodeJs实现即时消息推送

 

很早开始就想用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>

运行方法

  1. 在命令行输入 node server.js 打开服务器
  2. 打开两个页面，分别输入地址 http://localhost:8888/

注意一点：在index.htm中引用了一个文件"/socket.io/socket.io.js"，这个是由后台的Socket.IO模块自动提供的，我们不需要去管它。

在Socket.IO官网给的例子里，没有说明这里点，害得我乱折腾一天也没明白，直到看到上面的那篇外文才明白。。。

这个小Demo连聊天室都算不上，只是完成了即时信息推送而已。接下来有时间了再继续完善吧！

posted @ 2013-02-08 16:11  TiestoRay  阅读(2081)  评论(1)  编辑  收藏  举报