Node.js + WebSocket 實現的簡易聊天室

本實例程序在Windows下測試通過。

上述實例支持以下瀏覽器：

Firefox 7-9 (Old) (Protocol Version 8)
Firefox 10+ (Protocol Version 13)
Chrome 14,15 (Old) (Protocol Version 8)
Chrome 16+ (Protocol Version 13)
Internet Explorer 10 (Preview) (Protocol Version 13)

 

消息的傳遞也比較簡單，Client –> Server, Server –> Client

 

服務器廣播消息

 

 

數據傳輸使用的是JSON格式，前台建立連接的代碼比較簡單，ex：

$(function () {
    window.WebSocket = window.WebSocket || window.MozWebSocket;

    var connection = new WebSocket('ws://127.0.0.1:1337');

    connection.onopen = function () {
        //已建立連接
    };

    connection.onerror = function (error) {
        //接收或發送消息時遇到了錯誤
    };

    connection.onmessage = function (message) {

        try {
            var json = JSON.parse(message.data);
        } catch (e) {
            console.log('不能被正常解析的數據：', message.data);
            return;
        }

        // todo
    };
});

后端的實現，直接使用別人寫好的模塊所以傳統比較簡單一點（想在Windows下運行chat-server還是有點麻煩的），因為該模塊在Windows下安裝時，需要Microsoft Visual C++和Python 2.7的支持。--如果沒有安裝這兩個東東，還得先安裝一下。

如果順利的話，會看到如下圖所示的界面：

這樣我們就可以創建Server了，實現的代碼也並不復雜：

var WebSocketServer = require('websocket').server;
var http = require('http');

var server = http.createServer(function(request, response) {
    console.log((new Date()) + ' Received request for ' + request.url);
    response.writeHead(404);
    response.end();
});
server.listen(8080, function() {
    console.log((new Date()) + ' Server is listening on port 8080');
});

wsServer = new WebSocketServer({
    httpServer: server,
    // You should not use autoAcceptConnections for production
    // applications, as it defeats all standard cross-origin protection
    // facilities built into the protocol and the browser.  You should
    // *always* verify the connection's origin and decide whether or not
    // to accept it.
    autoAcceptConnections: false
});

function originIsAllowed(origin) {
  // put logic here to detect whether the specified origin is allowed.
  return true;
}

wsServer.on('request', function(request) {
    if (!originIsAllowed(request.origin)) {
      // Make sure we only accept requests from an allowed origin
      request.reject();
      console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');
      return;
    }

    var connection = request.accept('echo-protocol', request.origin);
    console.log((new Date()) + ' Connection accepted.');
    connection.on('message', function(message) {
        if (message.type === 'utf8') {
            console.log('Received Message: ' + message.utf8Data);
            connection.sendUTF(message.utf8Data);
        }
        else if (message.type === 'binary') {
            console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
            connection.sendBytes(message.binaryData);
        }
    });
    connection.on('close', function(reasonCode, description) {
        console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');
    });
});

從上述的例子中可以看出，websocket支持兩種傳遞方式：二進制流、utf8的文本流。前面的例子中所使用的是utf8文本流

 

完整的chat-server.js的代碼如下：

// http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
"use strict";

// Optional. You will see this name in eg. 'ps' or 'top' command
process.title = 'node-chat';

//websocket服務器監聽的端口
var webSocketsServerPort = 1337;

var webSocketServer = require('websocket').server;
var http = require('http');

//保存最近100條消息記錄
var history = [ ];

//當前連接的客戶端
var clients = [ ];

/**
 * 對聊天內容進行字符轉義
 */
function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}


var colors = [ 'red', 'green', 'blue', 'magenta', 'purple', 'plum', 'orange' ];
colors.sort(function(a,b) { return Math.random() > 0.5; } );

/**
 * HTTP server
 */
var server = http.createServer(function(request, response) {});

server.listen(webSocketsServerPort, function() {
    console.log(getNow() + " WebSocket Server is listening on port：" + webSocketsServerPort);
});

/**
 * WebSocket server
 * WebSocket server is tied to a HTTP server. To be honest I don't understand why.
 */
var wsServer = new webSocketServer({
    httpServer: server
});

//每一個客戶端請求建立連接時，都將觸發此方法
wsServer.on('request', function(request) {

    console.log(getNow() + ' ' + request.origin + ' 請求連接.');

    // accept connection - you should check 'request.origin' to make sure that client is connecting from your website
    // (http://en.wikipedia.org/wiki/Same_origin_policy)
    var connection = request.accept(null, request.origin);

    //保存當前請求連接客戶端的索引，以方便在斷開連接時，從連接池中移除該連接
    var index = clients.push(connection) - 1;
    var userName;
    var userColor;

    console.log(getNow() + ' 已建立連接...');

    //推送歷史聊天記錄
    if (history.length > 0) {
        connection.sendUTF(JSON.stringify({type: 'history', data: history}));
    }

    //某一客戶端發送消息過來
    connection.on('message', function(message) {
        if (message.type === 'utf8') {

            //第一次請求用於保存用戶信息
            if (!userName) {
                userName = htmlEntities(message.utf8Data);

                userColor = colors.shift();
                connection.sendUTF(JSON.stringify({ type:'color', data: userColor }));
                console.log(getNow() + ' 用戶已登錄: ' + userName + ' -- ' + userColor);

            } else {
                //記錄消息並廣播
                console.log(getNow() + userName + '-說: ' + message.utf8Data);

                //傳遞給客戶端的數據格式
                var obj = {
                    time: (new Date()).getTime(),
                    text: htmlEntities(message.utf8Data),
                    author: userName,
                    color: userColor
                };
                history.push(obj);

                //取數組最后100條消息記錄並保存
                history = history.slice(-100);

                //將消息廣播給所有客戶端
                var json = JSON.stringify({ type:'message', data: obj });
                for (var i=0; i < clients.length; i++) {
                    clients[i].sendUTF(json);
                }

                console.log("總的客戶端連接數：" + clients.length);
            }
        }
    });

    //用戶斷開連接
    connection.on('close', function(connection) {
        if (!userName && !userColor) {
            console.log(getNow() + " -- " + connection.remoteAddress + " 斷開鏈接.");

            //從連接池中移除連接
            clients.splice(index, 1);

            //回收訪用戶所使用的顏色
            colors.push(userColor);
        }
    });

});

function getNow() {
    return new Date().format('yyyy-MM-dd hh:mm:ss');
}

Date.prototype.format = function (fmt) { //author: meizz
    var o = {
        "M+": this.getMonth() + 1,
        "d+": this.getDate(),
        "h+": this.getHours(),
        "m+": this.getMinutes(),
        "s+": this.getSeconds(),
        "q+": Math.floor((this.getMonth() + 3) / 3),
        "S": this.getMilliseconds()
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

運行supervisor chat-server.js或者node chat-server.js 就OK了~

 

使用Firefox測試一下:)

 

本文參考：

1、Node.js & WebSocket - Simple chat tutorial

2、WebSocket-Node