通过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连聊天室都算不上,只是完成了即时信息推送而已。接下来有时间了再继续完善吧!

你可能感兴趣的:(socket)