node.js中的Socket.IO使用實(shí)例

更新時(shí)間：2014年11月04日 12:43:39 投稿：junjie

這篇文章主要介紹了node.js中的Socket.IO使用實(shí)例,本文講解了Socket.IO的安裝、結(jié)合express來(lái)構(gòu)建服務(wù)器、基本使用方法及一個(gè)網(wǎng)絡(luò)聊天室的完整案例,需要的朋友可以參考下

1. 簡(jiǎn)介

首先是Socket.IO的官方網(wǎng)站：http://socket.io

官網(wǎng)非常簡(jiǎn)潔，甚至沒(méi)有API文檔，只有一個(gè)簡(jiǎn)單的“How to use”可以參考。因?yàn)镾ocket.IO就跟官網(wǎng)一樣簡(jiǎn)潔好用易上手。

那么Socket.IO到底是什么呢？Socket.IO是一個(gè)WebSocket庫(kù)，包括了客戶端的js和服務(wù)器端的nodejs，它的目標(biāo)是構(gòu)建可以在不同瀏覽器和移動(dòng)設(shè)備上使用的實(shí)時(shí)應(yīng)用。它會(huì)自動(dòng)根據(jù)瀏覽器從WebSocket、AJAX長(zhǎng)輪詢、Iframe流等等各種方式中選擇最佳的方式來(lái)實(shí)現(xiàn)網(wǎng)絡(luò)實(shí)時(shí)應(yīng)用，非常方便和人性化，而且支持的瀏覽器最低達(dá)IE5.5，應(yīng)該可以滿足絕大部分需求了。

2. 安裝部署

2.1 安裝

首先安裝非常簡(jiǎn)單，在node.js環(huán)境下只要一句：

復(fù)制代碼代碼如下:

npm install socket.io

2.2 結(jié)合express來(lái)構(gòu)建服務(wù)器

express是一個(gè)小巧的Node.js的Web應(yīng)用框架，在構(gòu)建HTTP服務(wù)器時(shí)經(jīng)常使用到，所以直接以Socket.IO和express為例子來(lái)講解。

復(fù)制代碼代碼如下:

var express = require('express')

    , app = express()

    , server = require('http').createServer(app)

    , io = require('socket.io').listen(server);

server.listen(3001);

若不使用express，請(qǐng)參考socket.io/#how-to-use

3. 基本使用方法

主要分為服務(wù)器端和客戶端兩段代碼，都非常簡(jiǎn)單。

Server（app.js）：

復(fù)制代碼代碼如下:

//接上面的代碼
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函數(shù)接受字符串"connection"作為客戶端發(fā)起連接的事件，當(dāng)連接成功后，調(diào)用帶有socket參數(shù)的回調(diào)函數(shù)。我們?cè)谑褂胹ocket.IO的時(shí)候，基本上都在這個(gè)回調(diào)函數(shù)里面處理用戶的請(qǐng)求。

socket最關(guān)鍵的是emit和on兩個(gè)函數(shù)，前者提交（發(fā)出）一個(gè)事件（事件名稱(chēng)用字符串表示），事件名稱(chēng)可以自定義，也有一些默認(rèn)的事件名稱(chēng)，緊接著是一個(gè)對(duì)象，表示向該socket發(fā)送的內(nèi)容；后者接收一個(gè)事件（事件名稱(chēng)用字符串表示），緊接著是收到事件調(diào)用的回調(diào)函數(shù)，其中data是收到的數(shù)據(jù)。

在上面的例子中，我們發(fā)送了news事件和收到了other event事件，那么客戶端應(yīng)該會(huì)有對(duì)應(yīng)的接收和發(fā)送事件。沒(méi)錯(cuò)，客戶端代碼和服務(wù)器正好相反，而且非常相似。

Client（client.js）

復(fù)制代碼代碼如下:

<script src="/socket.io/socket.io.js"></script>

<script>

    var socket = io.connect('http://localhost');

    socket.on('news', function (data) {

        console.log(data);

        socket.emit('other event', { my: 'data' });

    });

</script>

有兩點(diǎn)要注意的：socket.io.js路徑要寫(xiě)對(duì)，這個(gè)js文件實(shí)際放在了服務(wù)器端的node_modules文件夾中，在請(qǐng)求這個(gè)文件時(shí)會(huì)重定向，因此不要詫異服務(wù)器端不存在這個(gè)文件但為什么還能正常工作。當(dāng)然，你可以把服務(wù)器端的socket.io.js這個(gè)文件拷貝到本地，使它成為客戶端的js文件，這樣就不用每次都向Node服務(wù)器請(qǐng)求這個(gè)js文件，增強(qiáng)穩(wěn)定性。第二點(diǎn)是要用var socket = io.connect('網(wǎng)站地址或ip');來(lái)獲取socket對(duì)象，接著就可以使用socket來(lái)收發(fā)事件。關(guān)于事件處理，上面的代碼表示收到“news”事件后，打印收到的數(shù)據(jù)，并向服務(wù)器發(fā)送“other event”事件。

注：內(nèi)置默認(rèn)的事件名例如“disconnect”表示客戶端連接斷開(kāi)，“message”表示收到消息等等。自定義的事件名稱(chēng)，盡量不要跟Socket.IO中內(nèi)置的默認(rèn)事件名重名，以免造成不必要的麻煩。

4. 其他常用API

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

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

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

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

5).強(qiáng)制使用WebSocket通信：（客戶端）socket.send('hi')，（服務(wù)器）用socket.on('message', function(data){})來(lái)接收。

5. 使用Socket.IO構(gòu)建一個(gè)聊天室

最后，我們通過(guò)一個(gè)簡(jiǎn)單的實(shí)例來(lái)結(jié)束本篇。用Socket.IO構(gòu)建一個(gè)聊天室就是50行左右的代碼的事情，實(shí)時(shí)聊天效果也非常好。以下貼出關(guān)鍵代碼：

Server（socketChat.js）

復(fù)制代碼代碼如下:

//一個(gè)客戶端連接的字典，當(dāng)一個(gè)客戶端連接到服務(wù)器時(shí)，
//會(huì)產(chǎn)生一個(gè)唯一的socketId，該字典保存socketId到用戶信息（昵稱(chēng)等）的映射
var connectionList = {};

exports.startChat = function (io) {
    io.sockets.on('connection', function (socket) {
        //客戶端連接時(shí)，保存socketId和用戶名
        var socketId = socket.id;
        connectionList[socketId] = {
            socket: socket
        };

        //用戶進(jìn)入聊天室事件，向其他在線用戶廣播其用戶名
        socket.on('join', function (data) {
            socket.broadcast.emit('broadcast_join', data);
            connectionList[socketId].username = data.username;
        });

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

        //用戶發(fā)言事件，向其他在線用戶廣播其發(fā)言內(nèi)容
        socket.on('say', function (data) {
            socket.broadcast.emit('broadcast_say',{
                username: connectionList[socketId].username,
                text: data.text
            });
        });
    })
};

Client(socketChatClient.js)

復(fù)制代碼代碼如下:

var socket = io.connect('http://localhost');
//連接服務(wù)器完畢后，馬上提交一個(gè)“加入”事件，把自己的用戶名告訴別人
socket.emit('join', {
username: 'Username hehe'
});

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

//收到離開(kāi)聊天室廣播后，顯示消息
socket.on('broadcast_quit', function(data) {
console.log(data.username + '離開(kāi)了聊天室');
});

//收到別人發(fā)送的消息后，顯示消息
socket.on('broadcast_say', function(data) {
console.log(data.username + '說(shuō): ' + data.text);
});

//這里我們假設(shè)有一個(gè)文本框textarea和一個(gè)發(fā)送按鈕.btn-send
//使用jQuery綁定事件
$('.btn-send').click(function(e) {
    //獲取文本框的文本
    var text = $('textarea').val();
    //提交一個(gè)say事件，服務(wù)器收到就會(huì)廣播
    socket.emit('say', {
        username: 'Username hehe'
        text: text
    });
});

這就是一個(gè)簡(jiǎn)單的聊天室DEMO，你可以根據(jù)你的需要隨意擴(kuò)展。Socket.IO基本上就是各種事件的提交和接收處理，思想非常簡(jiǎn)單。

您可能感興趣的文章: