JavaScript WebSocket技术详解：从原理到Socket.io实战

WebSocket概述与核心优势

概述

HTTP协议属于无状态协议，服务器无法直接识别客户端身份，必须依赖Session或Cookie等外部机制来维持与特定客户端的会话。这种机制在需要服务器与客户端持续交换数据的场景（如网络聊天）中显得较为不便。为此，HTML5规范引入了浏览器端的WebSocket API以解决该问题。

WebSocket的核心功能是支持服务器与客户端之间的全双工（full-duplex）通信。与HTTP协议类似“发邮件”——发出后需等待回复——的模式不同，WebSocket更像“打电话”，服务器和客户端可以同时在一条持续打开的数据通道上双向发送数据。

WebSocket协议可以完全替代Ajax方法，用于向服务器发送文本和二进制数据，且不受“同域限制”的约束。

WebSocket握手协议详解

WebSocket不使用HTTP协议，而是采用独立的协议规范。浏览器发出的WebSocket请求示例如下：

GET / HTTP/1.1 Connection: Upgrade Upgrade: websocket Host: example.com Origin: null Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ== Sec-WebSocket-Version: 13 上述请求头中包含Upgrade字段。根据HTTP/1.1规范，Upgrade头指示将通信协议从HTTP/1.1切换至指定协议。“Connection: Upgrade”表明浏览器通知服务器，若支持则升级至WebSocket协议。Origin字段用于验证浏览器域名是否在服务器允许的范围内。Sec-WebSocket-Key是用于握手协议的密钥，为Base64编码的16字节随机字符串。

服务器端的WebSocket响应如下：

HTTP/1.1 101 Switching Protocols Connection: Upgrade Upgrade: websocket Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s= Sec-WebSocket-Origin: null Sec-WebSocket-Location: ws://example.com/

服务器同样通过“Connection: Upgrade”通知浏览器进行协议切换。Sec-WebSocket-Accept的值由服务器在浏览器提供的Sec-WebSocket-Key字符串后附加“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”，然后计算SHA-1哈希值得到。浏览器将验证此值，以确认确为目标服务器响应了WebSocket请求。Sec-WebSocket-Location字段表示用于通信的WebSocket网址。

请注意，WebSocket协议使用ws作为前缀。此外，还有wss协议，表示加密的WebSocket通信，对应HTTPs协议。握手完成后，WebSocket协议在TCP协议之上开始传输数据。

WebSocket协议需要服务器端支持。目前较流行的实现是基于Node.js的Socket.io，更多实现可参考Wikipedia。在浏览器端，主流浏览器均支持WebSocket协议（包括IE 10及以上版本），唯一的例外是移动端的Opera Mini和Android Browser。

客户端WebSocket API使用指南

客户端

浏览器端对WebSocket协议的处理主要涉及以下三个方面：

建立连接和断开连接 发送数据和接收数据 处理错误

建立连接和断开连接

首先，客户端需检查浏览器是否支持WebSocket，方法是查看window对象是否具备WebSocket属性。

if(window.WebSocket != undefined) {

 // WebSocket代码

}

随后，开始与服务器建立连接（此处假设服务器位于本机1740端口，需使用ws协议）。

if(window.WebSocket != undefined) {

 var connection = new WebSocket('ws://localhost:1740');

}

建立连接后的WebSocket实例对象（即上述代码中的connection）包含一个readyState属性，表示当前状态，可取以下4个值：

0： 正在连接 1： 连接成功 2： 正在关闭 3： 连接关闭 握手协议成功后，readyState从0变为1，并触发open事件，此时即可向服务器发送信息。可以指定open事件的回调函数。

connection.onopen = wsOpen;

function wsOpen (event) { 
console.log(‘Connected to: ‘ + event.currentTarget.URL); 
}

关闭WebSocket连接会触发close事件。

connection.onclose = wsClose;

function wsClose () { 
console.log(“Closed”); 
}

connection.close();

发送数据和接收数据

连接建立后，客户端通过send方法向服务器发送数据。

connection.send(message); 除发送字符串外，也可使用Blob或ArrayBuffer对象发送二进制数据。

// 使用ArrayBuffer发送canvas图像数据

var img = canvas_context.getImageData(0, 0, 400, 320);

var binary = new Uint8Array(img.data.length);

for (var i = 0; i < img.data.length; i++) {

 binary[i] = img.data[i];

}

connection.send(binary.buffer);
// 使用Blob发送文件 
var file = document.querySelector(‘input[type=”file”]').files[0]; 
connection.send(file);

客户端收到服务器发送的数据时，会触发message事件。可通过定义message事件的回调函数来处理服务端返回的数据。

connection.onmessage = wsMessage;

function wsMessage (event) { 
console.log(event.data); 
}

上述代码中的回调函数wsMessage接收一个事件对象event作为参数，该对象的data属性包含服务器返回的数据。

若接收的是二进制数据，需将连接对象的格式设置为blob或arraybuffer。

connection.binaryType = 'arraybuffer';

connection.onmessage = function(e) {
 console.log(e.data.byteLength); // ArrayBuffer对象有byteLength属性
};

处理错误

若出现错误，浏览器会触发WebSocket实例对象的error事件。

connection.onerror = wsError;

function wsError(event) { 
console.log(“Error: “ + event.data); 
}

Node.js服务器端实现

服务器端

服务器端需单独部署处理WebSocket的代码。以下使用Node.js搭建服务器环境。

var http = require('http');

var server = http.createServer(function(request, response) {});

假设监听1740端口。

server.listen(1740, function() {

 console.log((new Date()) + ' Server is listening on port 1740');

});

接着启动WebSocket服务器。这需要加载websocket库，若未安装，可先使用npm命令安装。

var WebSocketServer = require('websocket').server;

var wsServer = new WebSocketServer({

 httpServer: server

});

WebSocket服务器建立request事件的回调函数。

var connection; wsServer.on(‘request', function(req){

connection = req.accept(‘echo-protocol', req.origin); 
});

上述代码中的回调函数接收一个参数req，表示request请求对象。随后在回调函数内部建立WebSocket连接connection。接着，需对connection的message事件指定回调函数。

wsServer.on(‘request', function(r){

 connection = req.accept(‘echo-protocol', req.origin);

<span class="nx">connection</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'message'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
 <span class="kd">var</span> <span class="nx">msgString</span> <span class="o">=</span> <span class="nx">message</span><span class="p">.</span><span class="nx">utf8Data</span><span class="p">;</span>
 <span class="nx">connection</span><span class="p">.</span><span class="nx">sendUTF</span><span class="p">(</span><span class="nx">msgString</span><span class="p">);</span>
<span class="p">});</span>
});

最后，监听用户的disconnect事件。

connection.on('close', function(reasonCode, description) {

 console.log(connection.remoteAddress + ' disconnected.');

});

使用ws模块部署简单的WebSocket服务器非常容易。

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 8080 });

wss.on('connection', function connection(ws) {
 ws.on('message', function incoming(message) {
 console.log('received: %s', message);
 });

 ws.send('something');
});

Socket.io库的应用与配置

Socket.io简介

Socket.io是目前最流行的WebSocket实现，包含服务器和客户端两部分。它不仅简化了接口，使操作更便捷，而且对于不支持WebSocket的浏览器，会自动降级为Ajax连接，最大程度保证兼容性。其目标是统一通信机制，使所有浏览器和移动设备均能进行实时通信。

第一步，在服务器端的项目根目录下安装socket.io模块。

$ npm install socket.io

第二步，在根目录下建立app.js，并写入以下代码（假设使用了Express框架）。

var app = require('express')();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);

server.listen(80);

app.get('/', function (req, res) {
 res.sendfile(__dirname + '/index.html');
});

上述代码表示先建立并运行HTTP服务器。Socket.io的运行建立在HTTP服务器之上。

第三步，将Socket.io插入客户端网页。

<script src="/socket.io/socket.io.js"></script>

随后，在客户端脚本中建立WebSocket连接。

var socket = io.connect('http://localhost:80');

由于本例假设WebSocket主机与客户端在同一台机器上，因此connect方法的参数为http://localhost。接着，指定news事件（即服务器端发送news）的回调函数。

socket.on('news', function (data){
 console.log(data);
});

最后，使用emit方法向服务器端发送信号，触发服务器端的anotherNews事件。

socket.emit('anotherNews');

请注意，emit方法可替代Ajax请求，而on方法指定的回调函数等同于Ajax的回调函数。第四步，在服务器端的app.js中加入以下代码。

io.sockets.on('connection', function (socket) {
 socket.emit('news', { hello: 'world' });
 socket.on('anotherNews', function (data) {
 console.log(data);
 });
});

上述代码中io.sockets.on方法指定connection事件（WebSocket连接建立）的回调函数。在回调函数中，使用emit方法向客户端发送数据，触发客户端的news事件。随后，再用on方法指定服务器端anotherNews事件的回调函数。

无论是服务器还是客户端，socket.io提供两个核心方法：emit方法用于发送消息，on方法用于监听对方发送的消息。

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