node.js中的Socket.IO使用實例_node.js

1. 簡介

首先是Socket.IO的官方網站：http://socket.io

官網非常簡潔，甚至沒有API文檔，只有一個簡單的「How to use」可以參考。因為Socket.IO就跟官網一樣簡潔好用易上手。

那Socket.IO到底是什麼呢？ Socket.IO是一個WebSocket庫，包括了客戶端的js和伺服器端的nodejs，它的目標是建立可以在不同瀏覽器和行動裝置上使用的即時應用。它會自動根據瀏覽器從WebSocket、AJAX長輪詢、Iframe串流等等各種方式中選擇最佳的方式來實現網路即時應用，非常方便且人性化，而且支援的瀏覽器最低達IE5.5，應該可以滿足絕大部分需求了。

2. 安裝部署

2.1 安裝

先安裝非常簡單，在node.js環境下只要一句：

複製程式碼 程式碼如下:

npm install socket.io

2.2 結合express來建構伺服器

express是一個小巧的Node.js的Web應用框架，在建構HTTP伺服器時常使用到，所以直接以Socket.IO和express為例子來講解。

複製程式碼 程式碼如下:

var express = require('express')
    , app = express()
    , server = require('http').createServer(app)
    , io = require('socket.io').listen(server);
server.listen(3001);

若不使用express，請參考socket.io/#how-to-use

3. 基本使用方法

主要分為伺服器端和客戶端兩段程式碼，都非常簡單。

Server（app.js）：

複製程式碼 程式碼如下:

//接上面的程式碼
app.get('/', function (req, res) {
    res.sendfile(__dirname '/index.html');});

io.sockets.on('connection', function (socket) {
    socket.emit('news', { hello: 'world' });
    socket.on('other event', function (data) {
        console.log(data);
    });
});

首先io.sockets.on函數接受字串"connection"作為客戶端發起連線的事件，當連線成功後，呼叫帶有socket參數的回呼函數。我們在使用socket.IO的時候，基本上都在這個回呼函數裡面處理使用者的請求。

socket最關鍵的是emit和on兩個函數，前者提交（發出）一個事件（事件名稱用字符串表示），事件名稱可以自定義，也有一些默認的事件名稱，緊接著是一個對象，表示向該socket發送的內容；後者接收一個事件（事件名稱以字串表示），緊接著是收到事件呼叫的回呼函數，其中data是收到的資料。

在上面的例子中，我們發送了news事件和收到了other event事件，那麼客戶端應該會有對應的接收和發送事件。沒錯，客戶端程式碼和伺服器正好相反，而且非常相似。

Client（client.js）

複製程式碼 程式碼如下:

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

有兩點要注意的：socket.io.js路徑要寫對，這個js檔案實際上放在了伺服器端的node_modules資料夾中，在請求這個檔案時會重定向，因此不要詬異伺服器端不存在這個文件但為什麼還能正常運作。當然，你可以把伺服器端的socket.io.js這個文件拷貝到本地，使它成為客戶端的js文件，這樣就不用每次都向Node伺服器請求這個js文件，增強穩定性。第二點是要用var socket = io.connect('網站地址或ip');來取得socket對象，接著就可以使用socket來收發事件。關於事件處理，上面的程式碼表示收到「news」事件後，列印收到的數據，並向伺服器發送「other event」事件。

註：內建預設的事件名稱例如「disconnect」表示客戶端連線斷開，「message」表示收到訊息等等。自訂的事件名稱，盡量不要跟Socket.IO中內建的預設事件名稱重名，以免造成不必要的麻煩。

4. 其他常用API

1).向所有客戶端廣播：socket.broadcast.emit('broadcast message');

2).進入一個房間（非常好用！相當於一個命名空間，可以對一個特定的房間廣播而不影響在其他房間或不在房間的客戶端）：socket.join('your room name' );

3).向一個房間廣播訊息（發送者收不到訊息）：socket.broadcast.to('your room name').emit('broadcast room message');

4).向一個房間廣播訊息（包括發送者都能收到訊息）（這個API屬於io.sockets）：io.sockets.in('another room name').emit('broadcast room message' );

5).強制使用WebSocket通訊：（客戶端）socket.send('hi')，（伺服器）用socket.on('message', function(data){})來接收。

5. 使用Socket.IO建構一個聊天室

最後，我們以一個簡單的實例來結束本篇。用Socket.IO建立聊天室就是50行左右的程式碼的事情，即時聊天效果也非常好。以下貼出關鍵代碼：

Server（socketChat.js）

複製程式碼 程式碼如下:

//一個客戶端連接的字典，當一個客戶端連接到伺服器時，
//會產生一個唯一的socketId，該字典將socketId保存到使用者資訊（暱稱等）的對應
var connectionList = {};

exports.startChat = function (io) {
    io.sockets.on('connection', function (socket) {
        //客戶端連線時，請儲存socketId與使用者名稱
        var socketId = socket.id;
        connectionList[socketId] = {
            socket: socket
        };

        //使用者進入聊天室事件，並向其他線上使用者廣播其使用者名稱
        socket.on('join', function (data) {
            socket.broadcast.emit('broadcast_join', data);
            connectionList[socketId].username = data.username;
        });

        //使用者離開聊天室事件，並向其他線上使用者廣播其離開
        socket.on('disconnect', function () {
            if (connectionList[socketId].username) {
                socket.broadcast.emit('broadcast_quit', {
                    username: connectionList[socketId].username
                });
            }
            delete connectionList[socketId];
        });

        //使用者發言事件，並向其他線上使用者廣播其演講內容
        socket.on('say', function (data) {
            socket.broadcast.emit('broadcast_say',{
                username: connectionList[socketId].username,
                text: data.text
            });
        });
    })
};

Client(socketChatClient.js)

複製程式碼 程式碼如下:

var socket = io.connect('http://localhost');
//連接伺服器完畢後，馬上提交一個「加入」事件，把自己的使用者名稱告訴別人
socket.emit('join', {
    username: 'Username hehe'
});

//收到加入聊天室廣播後，顯示訊息
socket.on('broadcast_join', function (data) {
    console.log(data.username '加入了聊天室');
});

//收到離開聊天室廣播後，顯示訊息
socket.on('broadcast_quit', function(data) {
    console.log(data.username '離開了聊天室');
});

//收到別人發送的訊息後，顯示訊息
socket.on('broadcast_say', function(data) {
    console.log(data.username '說: ' data.text);
});

//這裡我們假設有一個文字方塊textarea和一個傳送按鈕.btn-send
//使用jQuery綁定事件
$('.btn-send').click(function(e) {
    //取得文字方塊的文字
    var text = $('textarea').val();
    //提交一個say事件，伺服器收到就會廣播
    socket.emit('say', {
        username: 'Username hehe'
        text: text
    });
});

這是一個簡單的聊天室DEMO，你可以根據你的需要隨意擴充。 Socket.IO基本上就是各種事件的提交與接收處理，想法非常簡單。