学习 NodeJS 第八天：Socket 通讯实例

前言

一般来讲，HTTP 是基于文本的“单向”通讯机制。这里所谓的“单向”，乃相对于“双向”而言，因为 HTTP 服务器只需根据请求返还恰当的 HTML 给客户端即可，不涉及客户端向服务端的通讯。这种单向的机制比较简单，对网络质量要求也不高。而更多的场景则是需要可靠、稳定的端到端连接。一般这种服务是实时的、有态的而且是长连接，长连接则暗示两段须达致相向通讯的能力，也就说是服务端客户端两者间能够实时地相互间通信。毫无疑问，能够实时通信的服务器正是我们对服务器基本要求之一。区别于 HTTP 服务器以 HTTP 为通讯协议， 实时服务器一般采用较为底层的 TCP/IP 为协议通讯，实现了“套字节 Socket”的双向机制。

Socket 是根据博克莱 (U.C.Berkley) 大学早期发展的 Socket 概念写成的，其设计理念是是将网络传输类比成文件的读取与写入 (传送的动作被视为是写入/接收的动作被视为是读取)，如此、传送与接收就简化为编程人员比较容易懂的 读取与写入，降低了网络编程的学习困难度。

聊天室服务器

聊天室的实时连接基于底层的 TCP 直接连接，为此我们须调用 Node 的 TCP 模块。如果不太熟悉所谓 TCP 网络编程？太底层了是不是？没关系，我也不熟悉，边学边做嘛，只不过千万不必因为遇到陌生的词汇而害怕，其实这样原理并不深奥，而且下面的例子也十分的简单易懂！咱们就从最简单的开始吧，下面代码仅仅十行，它的作用是服务器向客户端输出一段文本，完成 Sever --> Client 的单向通讯。

// Sever --> Client 的单向通讯
var net = require('net'); 

var chatServer = net.createServer(); 

chatServer.on('connection', function(client) {
 client.write('Hi!\n'); // 服务端向客户端输出信息，使用 write() 方法
 client.write('Bye!\n'); 

 client.end(); // 服务端结束该次会话
}); 

chatServer.listen(9000);

客户端可以是系统自带的 Telnet：

telnet 127.0.0.1 9000

执行 telnet 后，与服务点连接，反馈 Hi! Bye! 的字符，并立刻结束服务端程序终止连接。如果我们要服务端接到到客户端的信息？可以监听 server.data 事件并且不要中止连接（否则会立刻结束无法接受来自客户端的消息）：

// 在前者的基础上，实现 Client --> Sever 的通讯，如此一来便是双向通讯
var net = require('net');
var chatServer = net.createServer(),
 clientList = []; 

chatServer.on('connection', function(client) {
 // JS 可以为对象自由添加属性。这里我们添加一个 name 的自定义属性，用于表示哪个客户端（客户端的地址+端口为依据）
 client.name = client.remoteAddress + ':' + client.remotePort;
 client.write('Hi ' + client.name + '!\n');
 clientList.push(client);
 client.on('data', function(data) {
  broadcast(data, client);// 接受来自客户端的信息
 });
});
function broadcast(message, client) {
 for(var i=0;i<clientList.length;i+=1) {
  if(client !== clientList[i]) {
  clientList[i].write(client.name + " says " + message);
  }
 }
}
chatServer.listen(9000);

这里要说明一下的是，不不同操作系统对端口范围的限制不一样，有可能是随机的。

那么上面是不是一个完整功能的代码呢？我们说还有一个问题没有考虑进去：那就是一旦某个客户端退出，却仍保留在 clientList 里面，这明显是一个空指针（NullPoint）。如果是在这样的话我们写程序太脆弱了，能不能更健壮一些？——请接着看。

首先我们简单地把 client 从数组 clientList 中移除掉。完成这工作一点都不困难。Node TCP API 已经为我们提供了 end 事件，即客户端中止与服务端连接的时候发生。移除 client 对象的代码如下：

chatServer.on('connection', function(client) {
 client.name = client.remoteAddress + ':' + client.remotePort
 client.write('Hi ' + client.name + '!\n'); 

 clientList.push(client) 

 client.on('data', function(data) {
 broadcast(data, client)
 }) 

 client.on('end', function() {
 clientList.splice(clientList.indexOf(client), 1); // 删除数组中的制定元素。这是 JS 基本功哦~
 })
})

但是我们还不敢说上述代码很健壮，因为一旦 end 没有被触发，异常仍然存在着。下面我们看看解决之道：重写 broadcast()：

function broadcast(message, client) {
 var cleanup = []
 for(var i=0;i<clientList.length;i+=1) {
 if(client !== clientList[i]) { 

  if(clientList[i].writable) { // 先检查 sockets 是否可写
  clientList[i].write(client.name + " says " + message)
  } else {
  cleanup.push(clientList[i]) // 如果不可写，收集起来销毁。销毁之前要 Socket.destroy() 用 API 的方法销毁。
  clientList[i].destroy()
  } 

 }
 } //Remove dead Nodes out of write loop to avoid trashing loop index
 for(i=0;i<cleanup.length;i+=1) {
 clientList.splice(clientList.indexOf(cleanup[i]), 1)
 }
}

TCP API 中还提供一个 error 事件，用于捕捉客户端的异常：

client.on('error', function(e) {
 console.log(e);
});

Node 网络编程的 API 还丰富，此次仅仅是个入门，更多的内容请接着看，关于浏览器 Socket 应用。

Socket.IO

前面说到，浏览器虽然也属于客户端的一种，但仅支持“单工”的 HTTP 通讯。有见及此，HTML5 新规范中推出了基于浏览器的 WebSocket，开发了底层的接口，允许我们能进行 更强大的操作，超越以往的 XHR。

如第一个例子那般，我们无须第三方框架就可以直接与 Node TCP 服务器 进行 Socket  通讯。

但我们又要认清一个事实，不是每个浏览器都可以顺利支持 WebSocket 的。于是 Socket.IO （http://socket.io）出现了，它提供了不支持 WebSocket 时候的降级支持，同时使得一些旧版本的浏览器也可以“全双工”地工作。优先使用的顺序如下：

  • WebSocket
  • Socket over Flash API
  • XHR Polling 长连接
  • XHR Multipart Streaming
  • Forever Iframe
  • JSONP Polling

经过封装，我们可以不探究客户端使用上述哪一种技术达致“全双工”；而我们编写代码时，亦无论考虑哪种放法，因为 Socket.IO 给我们的 API 只有一套。了解 Socket.IO 其用法就可以了。

先在浏览器部署 Socket.IO 的前端代码：

<!DOCTYPE html>
<html>
 <body>
 <script src="/socket.io/socket.io.js"></script>
 <script>
  var socket = io.connect('http://localhost:8080');
  // 当服务端发送一条消息到客户端，message 事件即被触发。我们把消息在控制台打印出来
  socket.on('message', function(data){ console.log(data) })
 </script>
 </body>
</html>

服务端 Node 代码：

var http = require('http'),
io = require('socket.io'),
fs = require('fs'); 

// 虽然我们这里使用了同步的方法，那会阻塞 Node 的事件循环，但是这是合理的，因为 readFileSync() 在程序周期中只执行一次，而且更重要的是，同步方法能够避免异步方法所带来的“与 SocketIO 之间额外同步的问题”。当 HTML 文件读取完毕，而且服务器准备好之后，如此按照顺序去执行就能让客户端马上得到 HTML 内容。
var sockFile = fs.readFileSync('socket.html'); 

// Socket 服务器还是构建于 HTTP 服务器之上，因此先调用 http.createServer()
server = http.createServer();
server.on('request', function(req, res){
 // 一般 HTTP 输出的格式
 res.writeHead(200, {'content-type': 'text/html'});
 res.end(sockFile);
}); 

server.listen(8080); 

var socket = io.listen(server); // 交由 Socket.io 接管 

// Socket.io 真正的连接事件
socket.on('connection', function(client){
 console.log('Client connected');
 client.send('Welcome client ' + client.sessionId); // 向客户端发送文本
});

当客户端连接时，服务端会同时出发两个事件：server.onRequest 和 Socket.onConnection。它们之间有什么区别呢？区别在于 Socket 的是持久性的。

多个 Socket 连接，先是客户端代码：

<!DOCTYPE html>
<html>
 <body>
 <script src="/socket.io/socket.io.js"></script>
 <script>
  var upandrunning = io.connect('http://localhost:8080/upandrunning');
  var weather = io.connect('http://localhost:8080/weather');
  upandrunning.on('message', function(data){
  document.write('<br /><br />Node: Up and Running Update<br />');
  document.write(data);
  });
  weather.on('message', function(data){
  document.write('<br /><br />Weather Update<br />');
  document.write(data);
  });
 </script>
 </body>
</html>

服务端代码：

var sockFile = fs.readFileSync('socket.html'); 

server = http.createServer();
server.on('request', function(req, res){
 res.writeHead(200, {'content-type': 'text/html'});
 res.end(sockFile);
}); 

server.listen(8080); 

var socket = io.listen(server); 

socket.of('/upandrunning')
 .on('connection', function(client){
 console.log('Client connected to Up and Running namespace.');
 client.send("Welcome to 'Up and Running'");
}); 

socket.of('/weather')
 .on('connection', function(client){
 console.log('Client connected to Weather namespace.');
 client.send("Welcome to 'Weather Updates'");
});

如上代码，我们可以划分多个命名空间，分别是 upandrunning 和 weather。

关于 Express 中使用 Soclet.io，可以参考《Node:Up and Ruuning》一书的 7.2.2 小节。

今晚时间的关系，涉及 Socket.io 许多方面还没有谈，容小弟我日后再了解。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室

    使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室

    一,利用Node搭建静态服务器 这个是这个项目的底层支撑部分.用来支持静态资源文件像html, css, gif, jpg, png, javascript, json, plain text等等静态资源的访问.这里面是有一个mime类型的文件映射. mime.js /** * mime类型的 map * @ author Cheng Liufeng * @ date 2014/8/30 * 当请求静态服务器文件的类型 html, css, gif, jpg, png, javascript,

  • nodejs socket实现的服务端和客户端功能示例

    本文实例讲述了nodejs socket实现的服务端和客户端功能.分享给大家供大家参考,具体如下: 使用node.js的net模块能很快的开发出基于TCP的服务端和客户端.直接贴代码. server.js /** * Created with JetBrains WebStorm. * User: Administrator * Date: 12-10-26 * Time: 下午3:44 * To change this template use File | Settings | File T

  • nodejs+websocket实时聊天系统改进版

    nodejs+websocket实时聊天系统改进版

    本文属于nodejs+websocket实时聊天系统的改进版本,具体内容如下 自己也是真的菜,一个websocket简单聊天系统硬被我搞了那么些天. 看来以后还是得写更多的代码. client.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&q

  • 基于Nodejs利用socket.io实现多人聊天室

    基于Nodejs利用socket.io实现多人聊天室

    socket.io简介 在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这篇文章讲述了websocket无到有,根据协议,分析数据帧的头,进行构建websocket.虽然代码短,但可以很好地体现websocket的原理. ,这个特性提供了浏览器端和服务器端的基于TCP连接的双向通道.但是并不是所有的浏览器都支持websocket特性,故为了磨平浏览器间的差异,为开发者提供统一的接口,引入了socket.io模块.在不支持webs

  • 浅析nodejs实现Websocket的数据接收与发送

    浅析nodejs实现Websocket的数据接收与发送

    WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术.在WebSocket API中,浏览器和服务器只需要要做一个握手(handshaking)的动作,然后,浏览器和服务器之间就形成了一条快速通道.两者之间就直接可以数据互相传送. WebSocket是一个通信的协议,分为服务器和客户端.服务器放在后台,保持与客户端的长连接,完成双方通信的任务.客户端一般都是实现在支持HTML5浏览器核心中,通过提供JavascriptAPI使用网页可以建立websocket连接.

  • 基于html5和nodejs相结合实现websocket即使通讯

    基于html5和nodejs相结合实现websocket即使通讯

    最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有WebSocket也很值得注意.可以用来做双屏互动游戏,何为双屏互动游戏?就是通过移动端设备来控制PC端网页游戏.这样的话就要用到实时通讯了,而WebSocket无疑是最合适的.WebSocket相较于HTTP来说,有很多的优点,主要表现在WebSocket只建立一个TCP连接,可以主动推送数据到客户端,而且还有更轻量级的协议头,减少数据传送量.所以WebSocket暂时来说是实时通讯的最佳协

  • 使用 NodeJS+Express 开发服务端的简单介绍

    使用 NodeJS+Express 开发服务端的简单介绍

    随着NodeJS的发展,现在已经被很多人熟知,NodeJS已经成为了前端开发人员必备的技能.本文不会对NodeJS过多介绍 如果你感兴趣可以访问NodeJS 官网 本文是利用NodeJS+Express开发一个服务器程序,Express 是一种保持最低程度规模的灵活 Node.js Web 应用程序框架,为 Web 和移动应用程序提供一组强大的功能.详见:官网 一 准备工作 首先你需要安装NodeJS环境 这里不再做介绍, 1.安装Express npm install express -g n

  • 用nodejs搭建websocket服务器

    用nodejs搭建websocket服务器

    简单开始 1.安装node.https://nodejs.org/en/ 2.安装ws模块 ws:是nodejs的一个WebSocket库,可以用来创建服务. https://github.com/websockets/ws 3.server.js 在项目里面新建一个server.js,创建服务,指定8181端口,将收到的消息log出来. var WebSocketServer = require('ws').Server, wss = new WebSocketServer({ port: 8

  • Ajax异步文件上传与NodeJS express服务端处理

    Ajax异步文件上传与NodeJS express服务端处理

    为了避免在实现简单的异步文件上传功能时候引入一个第三方库文件的尴尬情形(库文件可能造成多余的开销,拉低应用加载速度,尤其是在引入库文件之后仅使用其中一两个功能的情况下,性价比极低),最近了解了一下文件异步上传的实现原理,顺带看了看进度条.图片预览等功能的实现,做一点简单的整理. 文件上传 HTML结构如下,一个file input和一个button.当点击"上传"按钮的时候,将file input选中的文件上传到服务器. <input type="file"

  • Nodejs+Socket.io实现通讯实例代码

    Nodejs+Socket.io实现通讯实例代码

    目录结构 D:. │ package.json │ server.js │ └─public index.html socket.io.js 需要的条件 socket.io.js 供前端界面初始化io socket.io 供NodeJs端提供socket方法 socket.io.js存在于socket.io-client socket.io存在于socket.io 演示的功能 客户端发送消息给服务端 后端触发事件告知客户端 客户端离开触发服务端事件 服务端 server.js var expre

  • 初识NodeJS服务端开发入门（Express+MySQL）

    初识NodeJS服务端开发入门（Express+MySQL）

    NodeJS对前端来说无疑具有里程碑意义,在其越来越流行的今天,掌握NodeJS已经不再是加分项,而是前端攻城师们必须要掌握的技能.本文将与同志们一起完成一个基于Express+MySQL的入门级服务端应用,即可以对数据库中的一张表进行简单的CRUD操作.但本人还是斗胆认为,通过这个应用,可以让没怎么接触后端开发的同志对使用Node进行后端开发有一个大致了解. Express工程环境准备 1. 安装express,和express项目种子生成器(什么?你问第1步为什么不是安装NodeJS,我也只

  • Nodejs实现的一个简单udp广播服务器、客户端

    nodejs发送udp广播还是蛮简单的,我们先写个服务器用于接收广播数据,代码如下: 复制代码 代码如下: var dgram = require("dgram"); var server = dgram.createSocket("udp4"); server.on("error", function (err) {   console.log("server error:\n" + err.stack);   server

随机推荐