2011年9月28日

使用socket.io和node.js搭建websocket应用

websocket是HTML5的一种新的通信协议，它是实现了浏览器与服务器的双向通讯。在 WebSocket API 中，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
关于websocket的更多信息，请移步维基百科

使用WebSocket

在客户端使用websocket需要创建WebSocket对象，通过提供的open、send、message、close等方法实现创建、发送、监听信息、关闭连接。例如下面的代码：

if('WebSocket' in window){
    // 创建websocket实例
    var socket = new WebSocket('ws://localhost:8080');
    //打开
    socket.onopen = function(event) {
      // 发送
      socket.send('I am the client and I\'m listening!');
      // 监听
      socket.onmessage = function(event) {
        console.log('Client received a message',event);
      };
      // 关闭监听
      socket.onclose = function(event) {
        console.log('Client notified socket has closed',event);
      };
      // 关闭
      //socket.close()
    };
}else{
    alert('本浏览器不支持WebSocket哦~');
}

现在chrome、firefox等浏览器都已经支持了websocket，而IE却没有。下面我们来简单说说服务器端对websocket的支持。

服务器端支持websocket的语言不少，而且都有相关的开源项目，例如php的phpwebsockets：http://code.google.com/p/phpwebsockets/，java的jWebsocket：http://jwebsocket.org/。
更多的信息可以浏览这篇文章：Start Using HTML5 WebSockets Today

socket.io

socket.IO是一个websocket库，包括了客户端的js和服务器端的nodejs。官方地址：http://socket.io

客户端使用socket.io

去github clone socket.io的最新版本，或者直接饮用使用socket.io的CDN服务：

<script src="http://cdn.socket.io/stable/socket.io.js"></script>

下面可以创建使用socket.io库来创建客户端js代码了：

var socket = io.connect('http://localhost');
socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
});

socket.on是监听，收到服务器端发来的news的内容，则运行function，其中data就是请求回来的数据，socket.emit是发送消息给服务器端的方法。

使用socket.io和nodejs搭建websocket服务器端

socket.io不仅可以搭建客户端的websocket服务，而且支持nodejs服务器端的websocket。

nodejs安装socket.io

使用node插件管理包，运行下面的命令就可以安装成功socket.io

npm install socket.io

没有npm的或者windows用户可以使用github下载socket.io并且放入到node_modules文件夹中，具体配置可以参考文章：《nodejs教程：配置nodejs.exe的windows目录结构》

nodejs建立socket.io服务

通过nodejs的http模块就可以方便的搭建websocket服务器环境，例如下面的代码：

// 引入需要的模块：http和socket.io
var http = require('http'), io = require('socket.io');
//创建server
var server = http.createServer(function(req, res){
  // Send HTML headers and message
  res.writeHead(200,{ 'Content-Type': 'text/html' });
  res.end('

# Hello Socket Lover!
');
});
//端口8000
server.listen(8080);
//创建socket
var socket = io.listen(server);
//添加连接监听
socket.on('connection', function(client){
    //连接成功则执行下面的监听
    client.on('message',function(event){
        console.log('Received message from client!',event);
    });
    //断开连接callback
    client.on('disconnect',function(){
        console.log('Server has disconnected');
    });
});

more >>