JavaScript之WebSocket技术详解
概述
HTTP协议是⼀种⽆状态协议，服务器端本⾝不具有识别客户端的能⼒，必须借助外部机制，⽐如session和cookie，才能与特定客户端保持对话。这多多少少带来⼀些不便，尤其在服务器端与客户端需要持续交换数据的场合（⽐如⽹络聊天），更是如此。为了解决这个问题，HTML5提出了浏览器的。
WebSocket的主要作⽤是，允许服务器端与客户端进⾏全双⼯（full-duplex）的通信。举例来说，HTTP协议有点像发电⼦邮件，发出后必须等待对⽅回信；WebSocket则是像打电话，服务器端和客户端可以同时向对⽅发送数据，它们之间存着⼀条持续打开的数据通道。
WebSocket协议完全可以取代Ajax⽅法，⽤来向服务器端发送⽂本和⼆进制数据，⽽且还没有“同域限制”。
WebSocket不使⽤HTTP协议，⽽是使⽤⾃⼰的协议。浏览器发出的WebSocket请求类似于下⾯的样⼦：
GET / HTTP/1.1 Connection: Upgrade Upgrade: websocket Host: example Origin: null Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ== Sec-WebSocket-Version: 13上⾯的头信息显⽰，有⼀个HTTP头是Upgrade。HTTP1.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/
服务器端同样⽤“Connection: Upgrade”通知浏览器，需要改变协议。Sec-WebSocket-Accept是服务器在浏览器提供的Sec-WebSocket-Key字符串后⾯，添加“258EAFA5-E914-47DA-95CA-
C5AB0DC85B11” 字符串，然后再取sha-1的hash值。浏览器将对这个值进⾏验证，以证明确实是⽬标服务器回应了webSocket请求。Sec-WebSocket-Location表⽰进⾏通信的WebSocket⽹址。
请注意，WebSocket协议⽤ws表⽰。此外，还有wss协议，表⽰加密的WebSocket协议，对应HTTPs协议。
完成握⼿以后，WebSocket协议就在TCP协议之上，开始传送数据。
WebSocket协议需要服务器⽀持，⽬前⽐较流⾏的实现是基于node.js的socket.io，更多的实现可参阅。⾄于浏览器端，⽬前主流浏览器都⽀持WebSocket协议（包括IE 10+），仅有的例外是⼿机端的Opera Mini和Android Browser。
客户端
浏览器端对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事件的回调函数。
function wsOpen (event) {
console.log(‘Connected to: ‘ + event.currentTarget.URL);
}
关闭WebSocket连接，会触发close事件。
function wsClose () {
console.log(“Closed”);
}
connection.close();
发送数据和接收数据
连接建⽴后，客户端通过send⽅法向服务器端发送数据。
connection.send(message)；除了发送字符串，也可以使⽤ Blob 或 ArrayBuffer 对象发送⼆进制数据。
// 使⽤ArrayBuffer发送canvas图像数据
var img = ImageData(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事件的回调函数，来处理服务端返回的数据。
function wsMessage (event) {
console.log(event.data);
}
上⾯代码的回调函数wsMessage的参数为事件对象event，该对象的data属性包含了服务器返回的数据。
如果接收的是⼆进制数据，需要将连接对象的格式设为blob或arraybuffer。
connection.binaryType = 'arraybuffer';
console.log(e.data.byteLength); // ArrayBuffer对象有byteLength属性
};
处理错误
如果出现错误，浏览器会触发WebSocket实例对象的error事件。
function wsError(event) {
console.log(“Error: “ + event.data);
}
服务器端
服务器端需要单独部署处理WebSocket的代码。下⾯⽤node.js搭建⼀个服务器环境。
var http = require('http');
var server = ateServer(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 (‘request', function(req){
connection = req.accept(‘echo-protocol', igin);
});
上⾯代码的回调函数接受⼀个参数req，表⽰request请求对象。然后，在回调函数内部，建⽴WebSocket连接connection。接着，就要对connection的message事件指定回调函数。
<(‘request', function(r){
connection = req.accept(‘echo-protocol', igin);
<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 clas  <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事件。
<('close', function(reasonCode, description) {
console.Address + ' disconnected.');
});
使⽤ws模块，部署⼀个简单的WebSocket服务器⾮常容易。
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 8080 });
<('connection', function connection(ws) {
<('message', function incoming(message) {
console.log('received: %s', message);
});
ws.send('something');
});
Socket.io简介
Socket.io是⽬前最流⾏的WebSocket实现，包括服务器和客户端两个部分。它不仅简化了接⼝，使得操作更容易，⽽且对于那些不⽀持WebSocket的浏览器，会⾃动降为Ajax连接，最⼤限度地保证了兼
容性。它的⽬标是统⼀通信机制，使得所有浏览器和移动设备都可以进⾏实时通信。
第⼀步，在服务器端的项⽬根⽬录下，安装socket.io模块。
$ npm install socket.io
第⼆步，在根⽬录下建⽴app.js，并写⼊以下代码（假定使⽤了Express框架）。
var app = require('express')();
websocket和socketvar server = require('http').createServer(app);
var io = require('socket.io').listen(server);
server.listen(80);
<('/', 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('localhost:80');
<('news', function (data){
console.log(data);
});
最后，⽤emit⽅法向服务器端发送信号，触发服务器端的anotherNews事件。
请注意，emit⽅法可以取代Ajax请求，⽽on⽅法指定的回调函数，也等同于Ajax的回调函数。
第四步，在服务器端的app.js，加⼊以下代码。
('connection', function (socket) {
<('anotherNews', function (data) {
console.log(data);
});
});
上⾯代码的⽅法指定connection事件（WebSocket连接建⽴）的回调函数。在回调函数中，⽤emit⽅法向客户端发送数据，触发客户端的news事件。然后，再⽤on⽅法指定服务器端anotherNews事件的回调函数。
不管是服务器还是客户端，socket.io提供两个核⼼⽅法：emit⽅法⽤于发送消息，on⽅法⽤于监听对⽅发送的消息。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。