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

陳希球

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

?

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

陳希球

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

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

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

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

1Socket.js模塊及通信操作

Socket.js是Node.js的一個(gè)模塊，它提供了服務(wù)器和客戶(hù)端的雙方組件，能夠使應(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)的目錄，在程序中通過(guò)語(yǔ)句var io = require(’socket.io’)加載Socket.js模塊。

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

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

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

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

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

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

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

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

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){ //偵聽(tīng)連接請(qǐng)求

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

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

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

});

socket.on('disconnect', function(){ //偵聽(tīng)連接斷開(kāi)

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客戶(hù)端實(shí)現(xiàn)代碼

客戶(hù)端為Html文件，由腳本引入socket.io通過(guò)socket.on('random', function(data){ })偵聽(tīng)發(fā)來(lái)的隨機(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)頁(yè)中。同時(shí)在Node.js的后臺(tái)也可看到客戶(hù)端發(fā)來(lái)的不斷變化的數(shù)據(jù)。

3結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

[2]黃丹華.Node.js開(kāi)發(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

中圖分類(lèi)號(hào)：TP311.5

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

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

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

收稿日期：2016-01-03