搜尋

首頁 >web前端 >H5教程 >HTML5新特性之WebSocket

HTML5新特性之WebSocket

黄舟
黄舟原創
2017-03-30 11:40:031555瀏覽

1、概述

HTTP協定是一種無狀態協議，服務端本身不具有識別客戶端的能力，必須藉助外部機制，例如session和cookie，才能與特定客戶端保持對話。這多多少少帶來一些不便，尤其在伺服器端與客戶端需要持續交換資料的場合（例如網路聊天），更是如此。為了解決這個問題，HTML5提出了瀏覽器的WebSocket API。

WebSocket的主要作用是，允許伺服器端與客戶端進行全雙工（full-duplex）的通訊。舉例來說，HTTP協定有點像發電子郵件，發出後要等待對方回信；WebSocket則是像打電話，伺服器端和客戶端可以同時向對方發送數據，它們之間存在著一條持續打開的數據通道。

WebSocket協定完全可以取代Ajax方法，用來向伺服器端發送文字和二進位數據，而且還沒有「同域限制」。

WebSocket不使用HTTP協議，而是使用自己的協定。瀏覽器發出的WebSocket請求類似下面的樣子：

GET / HTTP/1.1Connection: Upgrade
Upgrade: websocket
Host: example.com
Origin: nullSec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

上面的頭資訊顯示，有一個HTTP頭是Upgrade。 HTTP1.1協定規定，Upgrade頭資訊表示將通訊協定從HTTP1.1轉向該項所指定的協定。 「Connection: Upgrade」就表示瀏覽器通知伺服器，如果可以，就升級到webSocket協定。 Origin用於驗證瀏覽器網域是否在伺服器許可範圍內。 Sec-WebSocket-Key則是用來握手協定的金鑰，是base64編碼的16位元組隨機字串。

服務端的WebSocket回應則是： 

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

服務端同樣用「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，更多實作可參閱Wikipedia。至於瀏覽器端，目前主流瀏覽器都支援WebSocket協定（包括IE10+），僅有的例外是手機端的Opera Mini和Android Browser。

2、客戶端

瀏覽器端對WebSocket協定的處理，只不過是三件事：

  • 建立連線與斷開連線

  • 傳送資料與接收資料

  • 處理錯誤

2.1 建立連線與斷線

首先，客戶端要檢查瀏覽器是否支援WebSocket，使用的方法是查看window物件是否具有WebSocket屬性。 

if (window.WebSocket != undefined) {    // 支持}

然後，開始與伺服器建立連接（這裡假定伺服器就是本機的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');
}

關閉WebSocket會觸發close事件。 

connection.onclose = wsClose;function onClose(event) {    var wasClean = event.wasClean; //bool值，连接是否关闭了
    var code = event.code; //连接状态（数字），由服务端提供
    var reason = event.reason; //关闭原因，由服务端提供
    console.log('Closed');
}

connection.close();

2.2 傳送資料和接收資料

#連線建立後，用戶端透過send方法傳送資料到伺服器端。 

connection.send(message);

除了傳送字串，也可以使用Blob或ArrayBuffer物件發送二進位資料。 

//使用ArrayBuffer发送Canvas图像数据
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Unit8Array(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(&#39;input[type="file"]&#39;).files[0];
connection.send(file);

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

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

上面代码的回调函数wsMessage的参数为事件对象evnet，该对象的data属性包含了服务器返回的数据。

2.3 处理错误

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

connection.onerror = wsError;function wsError(event) {
    console.log(&#39;Error: &#39; + event.data);
}

3、服务器端

服务器端需要单独部署处理WebSocket的代码。下面用node.js搭建一个服务器环境。

var http = require(&#39;http&#39;);var server = http.createServer(function(request, response){});

假设监听1740端口。

server.listen(1740, function() {
    console.log((new Date()) + &#39; Server is listening on port 1740&#39;);
});

接着启动WebSocket服务器。这需要加载websocket库，如果没有安装，可以先使用命令安装。

var WebSocketServer = require(&#39;websocket&#39;).server;var wsServer = new WebSocketServer({
    httpServer: server
});

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

var connection;

wsServer.on(&#39;request&#39;, function(req){
    connect = req.accept(&#39;echo-protocol&#39;, req.origin);
});

上面代码的回调函数接受一个参数req，表示request请求对象。然后，在回调函数内部，建立WebSocket连接Connection。接着，就要对connection的message事件指定回调函数。

wsServer.on(&#39;request&#39;, function(r) {
    connection = req.accept(&#39;echo-protocol&#39;, req.origin);

    connection.on(&#39;message&#39;, function(message) {        
    var msgString = message.utf8Data;
        connection.sendUTF(msgString);
    });
});

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

connection.on(&#39;close&#39;, function(reasonCode, description) {
    console.log(connection.remoteAddress + &#39; disconnected&#39;);
});

4、Socket.io简介

Socket.io是目前最流行的WebSocket实现，包括服务器和浏览器两个部分。它不仅简化了接口，使得操作更容易，而且对于那些不支持WebSocket的浏览器，会自动降为Ajax连接，最大限度地保证了兼容性。

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

npm install socket.io

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

var app = require(&#39;express&#39;)();
var server = require(&#39;http&#39;).createServer(app);
var io = require(&#39;socket.io&#39;).listen(server);

server.listen(80);

app.get(&#39;/&#39;, function (req, res) {
  res.sendfile(dirname + &#39;/index.html&#39;);
});

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

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

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

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

var socket = io.connect(&#39;http://localhost&#39;);

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

socket.on(&#39;news&#39;, function (data){
   console.log(data);
});

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

请注意：emit方法可以取代Ajax请求，而on方法指定的回调函数，也等同于Ajax的回调函数。

第四步，在服务器端的app.js中加入以下代码。

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

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

以上是HTML5新特性之WebSocket的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：HTML5新特性之Mutation Observer程式碼詳解下一篇：HTML5新特性之Mutation Observer程式碼詳解

相關文章

看更多