基于Socket.IO框架的服务器与浏览器双向实时通信的实现

陈希球

(长江工程职业技术学院，武汉　430212)



基于Socket.IO框架的服务器与浏览器双向实时通信的实现

陈希球

(长江工程职业技术学院，武汉430212)

摘要：Node.js 是全球最受欢迎的Web应用开发平台，它采用模块式的开源框架结构，聚集了众多的开发资源，其中socket.io模块封装了网络底层通信，支持多种网络通信协议，易于实现跨浏览器通信。通过分析socket.io模块的通信功能，实现了服务器与浏览器之间的双向通信，并说明了编程方法。

关键词：服务器；浏览器；通信

Node.js是由Ryan Dah在2009年编写的基于Chrome V8引擎的JavaScript 运行库。它使用了一个事件驱动、非阻塞式 I/O 的模型，使在Web应用开发方面既轻量又高效。在几年的时间里，Node.js逐渐发展成一个成熟的开发平台，吸引了许多开发者。有许多大型高流量网站都采用Node.js进行开发，此外，开发人员还可以使用它来开发一些快速移动框架。除了Web应用外，Node.js也被应用到应用程序监控、媒体流、远程控制、桌面和移动应用等等。Node.js通过实现CommonJS的Modules/1.0标准引入了模块(module)概念，使用Module模块去划分不同的功能，每一个Node.js的类库都包含了十分丰富的各类函数，以简化应用的开发。Node.js是个开源的开发平台，很多模块大多是第三方提供的关于Node.js的开发、应用等功能，Node.js的NPM包管理网站中发布的模块已达147 579个，Node.js 的包管理器Npm是全球最大的开源库生态系统。

1Socket.js模块及通信操作

Socket.js是Node.js的一个模块，它提供了服务器和客户端的双方组件，能够使应用程序方便地实现Http,Tcp和Udp等操作。在应用程序中要使用 Socket.js功能，必须利用包管理工具Npm先在应用程序的运行目录中安装该模块，在命令行输入命令Npm install socket.js进行安装，安装成功会生成相应的目录，在程序中通过语句var io = require(’socket.io’)加载Socket.js模块。

Node.js 使用事件驱动模型处理通信问题，由于 Node.js是单线程应用程序，它是通过事件和回调支持并发。它的每一个API是异步的，作为一个单独的线程，使用观察者模式，将线程保持一个事件循环中，每当任何任务得到完成时，它触发该事件的标志侦听器函数执行相应的事件，事件循环的结构如图1所示。

Socket.js模块中提供了客户端与服务器连接、侦听、断开等事件及双向传输数据的API函数。用socket.on(’action’,function(){...})来侦听通信事件，action为消息类型，可以是connection、disconnect和用户自定义的消息messag，function(){...}为事件处理函数，当事件发生时，Node.js异步回调该函数来处理对应的事件。用socket.emit(’action’,data)来发送数据，action表示消息类型串，用于对方侦听，data为发送的数据。服务器可以用socket.broadcast.emit(’action’,data)向所有连接的客户发送数据。

图1 Node.js事件循环

2服务器与浏览器双向通信的实现

为实现服务器与浏览器之间的双向通信，要利用Socket.io API建立服务器框架,在指定的端口上侦听客户的连接请求,在连接成功后，双方进入侦听通信事件消息循环。发送方主动发送数据，接收方根据侦听的消息类型异步回调数据处理函数，图2是服务器送数据，客户端接收数据流程图，反向传递数据过程相似。

下面以服务端不断向客户端发送100以内的随机数，客户端收到数据增1后发回服务端为例，说明服务端和客户端代码的编写方法。

2.1服务端实现代码

通过加载相应模块建立服务器，然后进入侦听事件，其中用 socket.on('message', function(message){ }) 侦听客户端发送过来的数据，用 socket.emit('random', randomNum())向客户发送数据，其它见注解部分。

var app = require('express')(); //加载express 模块

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

var io = require('socket.io')(server);//加载socket.io模块，并将socket.io绑定到服务器

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

res.sendFile(__dirname + '/index.html'); //读取当前目录下的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()); //要反复执行的是emit

}

});

function randomNum(){

return Math.floor((Math.random() * 100) + 1); //产生随机数

}

server.listen(3000);

2.2客户端实现代码

客户端为Html文件，由脚本引入socket.io通过socket.on('random', function(data){ })侦听发来的随机数， 用 Socket.emit('message',data+1)发送数据到服务器。当启动服务器程序后，在浏览器地址栏输入：Http://127.0.0.1:3000，不用刷新浏览器可以看到还断变化的随机数显示在网页中。同时在Node.js的后台也可看到客户端发来的不断变化的数据。

3结束语

Html5推出的Websocket尽管解决了浏览器的实时通信问题，但它是一种长连接协议，通信过程较为复杂，在连接时要求服务器进行密钥认证，支持的浏览器少，而socket.io也实现了ws协议库，支持更多的网络协议。

参考文献：

[1]George Ornbo.Node.js入门经典[M].北京：人民邮电出版社，2013.

[2]黄丹华.Node.js开发实战详解[M].北京：清华大学出版社，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

文献标识码：A

文章编号：1673-0496(2016)01-0031-02

作者简介：陈希球，(1962-)湖北崇阳人，教授，硕士，主要从事电子信息技术教学与应用研究。

收稿日期：2016-01-03