陳希球

(長江工程職業(yè)技術(shù)學(xué)院，武漢　430212)

?

基于Socket.IO框架的服務(wù)器與瀏覽器雙向?qū)崟r(shí)通信的實(shí)現(xiàn)

陳希球

(長江工程職業(yè)技術(shù)學(xué)院，武漢430212)

摘要：Node.js 是全球最受歡迎的Web應(yīng)用開發(fā)平臺(tái)，它采用模塊式的開源框架結(jié)構(gòu)，聚集了眾多的開發(fā)資源，其中socket.io模塊封裝了網(wǎng)絡(luò)底層通信，支持多種網(wǎng)絡(luò)通信協(xié)議，易于實(shí)現(xiàn)跨瀏覽器通信。通過分析socket.io模塊的通信功能，實(shí)現(xiàn)了服務(wù)器與瀏覽器之間的雙向通信，并說明了編程方法。

關(guān)鍵詞：服務(wù)器；瀏覽器；通信

Node.js是由Ryan Dah在2009年編寫的基于Chrome V8引擎的JavaScript 運(yùn)行庫。它使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式 I/O 的模型，使在Web應(yīng)用開發(fā)方面既輕量又高效。在幾年的時(shí)間里，Node.js逐漸發(fā)展成一個(gè)成熟的開發(fā)平臺(tái)，吸引了許多開發(fā)者。有許多大型高流量網(wǎng)站都采用Node.js進(jìn)行開發(fā)，此外，開發(fā)人員還可以使用它來開發(fā)一些快速移動(dòng)框架。除了Web應(yīng)用外，Node.js也被應(yīng)用到應(yīng)用程序監(jiān)控、媒體流、遠(yuǎn)程控制、桌面和移動(dòng)應(yīng)用等等。Node.js通過實(shí)現(xiàn)CommonJS的Modules/1.0標(biāo)準(zhǔn)引入了模塊(module)概念，使用Module模塊去劃分不同的功能，每一個(gè)Node.js的類庫都包含了十分豐富的各類函數(shù)，以簡化應(yīng)用的開發(fā)。Node.js是個(gè)開源的開發(fā)平臺(tái)，很多模塊大多是第三方提供的關(guān)于Node.js的開發(fā)、應(yīng)用等功能，Node.js的NPM包管理網(wǎng)站中發(fā)布的模塊已達(dá)147 579個(gè)，Node.js 的包管理器Npm是全球最大的開源庫生態(tài)系統(tǒng)。

1Socket.js模塊及通信操作

Socket.js是Node.js的一個(gè)模塊，它提供了服務(wù)器和客戶端的雙方組件，能夠使應(yīng)用程序方便地實(shí)現(xiàn)Http,Tcp和Udp等操作。在應(yīng)用程序中要使用 Socket.js功能，必須利用包管理工具Npm先在應(yīng)用程序的運(yùn)行目錄中安裝該模塊，在命令行輸入命令Npm install socket.js進(jìn)行安裝，安裝成功會(huì)生成相應(yīng)的目錄，在程序中通過語句var io = require(’socket.io’)加載Socket.js模塊。

Node.js 使用事件驅(qū)動(dòng)模型處理通信問題，由于 Node.js是單線程應(yīng)用程序，它是通過事件和回調(diào)支持并發(fā)。它的每一個(gè)API是異步的，作為一個(gè)單獨(dú)的線程，使用觀察者模式，將線程保持一個(gè)事件循環(huán)中，每當(dāng)任何任務(wù)得到完成時(shí)，它觸發(fā)該事件的標(biāo)志偵聽器函數(shù)執(zhí)行相應(yīng)的事件，事件循環(huán)的結(jié)構(gòu)如圖1所示。

Socket.js模塊中提供了客戶端與服務(wù)器連接、偵聽、斷開等事件及雙向傳輸數(shù)據(jù)的API函數(shù)。用socket.on(’action’,function(){...})來偵聽通信事件，action為消息類型，可以是connection、disconnect和用戶自定義的消息messag，function(){...}為事件處理函數(shù)，當(dāng)事件發(fā)生時(shí)，Node.js異步回調(diào)該函數(shù)來處理對應(yīng)的事件。用socket.emit(’action’,data)來發(fā)送數(shù)據(jù)，action表示消息類型串，用于對方偵聽，data為發(fā)送的數(shù)據(jù)。服務(wù)器可以用socket.broadcast.emit(’action’,data)向所有連接的客戶發(fā)送數(shù)據(jù)。

圖1 Node.js事件循環(huán)

2服務(wù)器與瀏覽器雙向通信的實(shí)現(xiàn)

為實(shí)現(xiàn)服務(wù)器與瀏覽器之間的雙向通信，要利用Socket.io API建立服務(wù)器框架,在指定的端口上偵聽客戶的連接請求,在連接成功后，雙方進(jìn)入偵聽通信事件消息循環(huán)。發(fā)送方主動(dòng)發(fā)送數(shù)據(jù)，接收方根據(jù)偵聽的消息類型異步回調(diào)數(shù)據(jù)處理函數(shù)，圖2是服務(wù)器送數(shù)據(jù)，客戶端接收數(shù)據(jù)流程圖，反向傳遞數(shù)據(jù)過程相似。

下面以服務(wù)端不斷向客戶端發(fā)送100以內(nèi)的隨機(jī)數(shù)，客戶端收到數(shù)據(jù)增1后發(fā)回服務(wù)端為例，說明服務(wù)端和客戶端代碼的編寫方法。

2.1服務(wù)端實(shí)現(xiàn)代碼

通過加載相應(yīng)模塊建立服務(wù)器，然后進(jìn)入偵聽事件，其中用 socket.on('message', function(message){ }) 偵聽客戶端發(fā)送過來的數(shù)據(jù)，用 socket.emit('random', randomNum())向客戶發(fā)送數(shù)據(jù)，其它見注解部分。

var app = require('express')(); //加載express 模塊

var server = require('http').Server(app); //建立Http 服務(wù)器

var io = require('socket.io')(server);//加載socket.io模塊，并將socket.io綁定到服務(wù)器

app.get('/', function(req, res){

res.sendFile(__dirname + '/index.html'); //讀取當(dāng)前目錄下的index.html文件送瀏覽器

});

io.on('connection', function(socket){ //偵聽連接請求

console.log("Connection " + socket.id + " accepted.");

socket.on('message', function(message){ //偵聽事件消息

console.log("Received message: " + message + " - from client " + socket.id);

});

socket.on('disconnect', function(){ //偵聽連接斷開

console.log("Connection " + socket.id + " terminated.");

});

setInterval(update, 250);

function update(){

socket.emit('random', randomNum()); //要反復(fù)執(zhí)行的是emit

}

});

function randomNum(){

return Math.floor((Math.random() * 100) + 1); //產(chǎn)生隨機(jī)數(shù)

}

server.listen(3000);

2.2客戶端實(shí)現(xiàn)代碼

客戶端為Html文件，由腳本引入socket.io通過socket.on('random', function(data){ })偵聽發(fā)來的隨機(jī)數(shù)， 用 Socket.emit('message',data+1)發(fā)送數(shù)據(jù)到服務(wù)器。當(dāng)啟動(dòng)服務(wù)器程序后，在瀏覽器地址欄輸入：Http://127.0.0.1:3000，不用刷新瀏覽器可以看到還斷變化的隨機(jī)數(shù)顯示在網(wǎng)頁中。同時(shí)在Node.js的后臺(tái)也可看到客戶端發(fā)來的不斷變化的數(shù)據(jù)。

3結(jié)束語

Html5推出的Websocket盡管解決了瀏覽器的實(shí)時(shí)通信問題，但它是一種長連接協(xié)議，通信過程較為復(fù)雜，在連接時(shí)要求服務(wù)器進(jìn)行密鑰認(rèn)證，支持的瀏覽器少，而socket.io也實(shí)現(xiàn)了ws協(xié)議庫，支持更多的網(wǎng)絡(luò)協(xié)議。

參考文獻(xiàn)：

[1]George Ornbo.Node.js入門經(jīng)典[M].北京：人民郵電出版社，2013.

[2]黃丹華.Node.js開發(fā)實(shí)戰(zhàn)詳解[M].北京：清華大學(xué)出版社，2014.

On Implementation of Bidirectional Real-time Communication between Server and Browser Based on Socket. IO Framework

CHEN Xi-qiu

(Changjiang Institute of Technology, Wuhan, 430212, China)

Abstract：Node. js is the world's most popular web application development platform. It adopts modular open source framework structure and gathers numerous development resources, among which Socket. IO module encapsulates the underlying network communication, supports various network communication protocols and is easy to implement cross browser communication. Through analysis of the communication function of Socket.IO, bidirectional communication between server and browser is realized and the programming method is explained.

Key words：server; browser; communication

DOI:10.14079/j.cnki.cn42-1745/tv.2016.01.010

中圖分類號：TP311.5

文獻(xiàn)標(biāo)識碼：A

文章編號：1673-0496(2016)01-0031-02

作者簡介：陳希球，(1962-)湖北崇陽人，教授，碩士，主要從事電子信息技術(shù)教學(xué)與應(yīng)用研究。

收稿日期：2016-01-03