DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> node.js中的Socket.IO使用實例教程
node.js中的Socket.IO使用實例教程
編輯:關於JavaScript     

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 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>

有兩點要注意的: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基本上就是各種事件的提交和接收處理,思想非常簡單。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved