帶你認識HTML5中的WebSocket

2020-03-24 18:08:32

字體：大中小

來源：轉載

供稿：網友

認識 HTML5 的 WebSocket在 HTML5 規范中，我最喜歡的Web技術就是正迅速變得流行的 WebSocket API。WebSocket 提供了一個受歡迎的技術，以替代我們過去幾年一直在用的html' target='_blank'>Ajax技術。這個新的API提供了一個方法，從客戶端使用簡單的語法有效地推動消息到服務器。讓我們看一看 HTML5 的 WebSocket API：它可用于客戶端、服務器端。而且有一個優秀的第三方API，名為Socket.IO。一、HTML5 中的 WebSocket API 是個什么東東？WebSocket API是下一代客戶端-服務器的異步通信方法。該通信取代了單個的TCP套接字，使用ws或wss協議，可用于任意的客戶端和服務器程序。WebSocket目前由W3C進行標準化。WebSocket已經受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等瀏覽器的支持。WebSocket API最偉大之處在于服務器和客戶端可以在給定的時間范圍內的任意時刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因為Ajax技術需要客戶端發起請求，而WebSocket服務器和客戶端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允許跨域通信。Ajax技術很聰明的一點是沒有設計要使用的方式。WebSocket為指定目標創建，用于雙向推送消息。二、HTML5 中的 WebSocket API 的用法只專注于客戶端的API，因為每個服務器端語言有自己的API。下面的代碼片段是打開一個連接，為連接創建事件監聽器，斷開連接，消息時間，發送消息返回到服務器，關閉連接。
復制代碼代碼如下:
// 創建一個Socket實例
var socket = new WebSocket('ws://localhost:8080');
// 打開Socket
socket.onopen = function(event){
// 發送一個初始化消息
socket.send('I am the client and I/'m listening!');
// 監聽消息
socket.onmessage = function(event){
console.log('Client received a message',event);
};
// 監聽Socket的關閉
socket.onclose = function(event){
console.log('Client notified socket has closed',event);
};
// 關閉Socket....
//socket.close()
};
讓我們來看看上面的初始化片段。參數為URL，ws表示WebSocket協議。onopen、onclose和onmessage方法把事件連接到Socket實例上。每個方法都提供了一個事件，以表示Socket的狀態。onmessage事件提供了一個data屬性，它可以包含消息的Body部分。消息的Body部分必須是一個字符串，可以進行序列化/反序列化操作，以便傳遞更多的數據。WebSocket的語法非常簡單，使用WebSockets是難以置信的容易除非客戶端不支持WebSocket。IE瀏覽器目前不支持WebSocket通信。如果你的客戶端不支持WebSocket通信，下面有幾個后備方案供你使用：Flash技術 Flash可以提供一個簡單的替換。使用Flash最明顯的缺點是并非所有客戶端都安裝了Flash，而且某些客戶端，如iPhone/iPad，不支持Flash。AJAX Long-Polling技術用AJAX的long-polling來模擬WebSocket在業界已經有一段時間了。它是一個可行的技術，但它不能優化發送的信息。也就是說，它是一個解決方案，但不是最佳的技術方案。由于目前的IE等瀏覽器不支持WebSocket，要提供WebSocket的事件處理、返回傳輸、在服務器端使用一個統一的API，那么該怎么辦呢？幸運的是，Guillermo Rauch創建了一個Socket.IO技術。三、帶Socket.IO的WebSocketSocket.IO是Guillermo Rauch創建的WebSocket API，Guillermo Rauch是LearnBoost公司的首席技術官以及LearnBoost實驗室的首席科學家。Socket.IO使用檢測功能來判斷是否建立WebSocket連接，或者是AJAX long-polling連接，或Flash等。可快速創建實時的應用程序。Socket.IO還提供了一個NodeJS API，它看起來非常像客戶端API。建立客戶端Socket.IOSocket.IO可以從GitHub下載，可以把socket.io.js文件包含到頁面中：

復制代碼代碼如下:
script src="http://cdn.socket.io/stable/socket.io.js" /script

此時，Socket.IO在此頁面上是有效的，是時候創建Socket了：
復制代碼代碼如下:
// 創建Socket.IO實例，建立連接
var socket= new io.Socket('localhost',{
port: 8080
});
socket.connect();
// 添加一個連接監聽器
socket.on('connect',function(){
console.log('Client has connected to the server!');
});
// 添加一個連接監聽器
socket.on('message',function(data){
console.log('Received a message from the server!',data);
});
// 添加一個關閉連接的監聽器
socket.on('disconnect',function(){
console.log('The client has disconnected!');
});
// 通過Socket發送一條消息到服務器
function sendMessageToServer(message){
socket.send(message);
}
Socket.IO簡化了WebSocket API，統一了返回運輸的API。傳輸包括：WebSocket
Flash Socket
AJAX long-polling
AJAX multipart streaming
IFrame
JSONP polling你還可以設置任意的Socket.IO構造器的第二個選項，選項包括：port - 待連接的端口transports - 一個數組，包含不同的傳輸類型transportOptions - 傳輸的參數使用的對象，帶附加屬性Socket.IO還提供了由本地WebSocket API提供的普通連接、斷開連接、消息事件。Socket還提供了封裝每個事件類型的方法。四、NodeJS和Socket.IO聯合開發Socket.IO提供的服務器端解決方案，允許統一的客戶端和服務器端的API。使用Node，你可以創建一個典型的HTTP服務器，然后把服務器的實例傳遞到Socket.IO。從這里，你創建連接、斷開連接、建立消息監聽器，跟在客戶端一樣。一個簡單的服務器端腳本看起來如下：

復制代碼代碼如下:
// 需要HTTP 模塊來啟動服務器和Socket.IO
var http= require('http'), io= require('socket.io');
// 在8080端口啟動服務器
var server= http.createServer(function(req, res){
// 發送HTML的headers和message
res.writeHead(200,{'Content-Type': 'text/html' });
res.end(' h1 Hello Socket Lover! /h1
});
server.listen(8080);
// 創建一個Socket.IO實例，把它傳遞給服務器
var socket= io.listen(server);
// 添加一個連接監聽器
socket.on('connection', function(client){
// 成功！現在開始監聽接收到的消息
client.on('message',function(event){
console.log('Received message from client!',event);
});
client.on('disconnect',function(){
clearInterval(interval);
console.log('Server has disconnected');
});
});
你可以運行服務器部分，假定已安裝了NodeJS，從命令行執行：node socket-server.js現在客戶端和服務器都能來回推送消息了！在NodeJS腳本內，可以使用簡單的JavaScript創建一個定期消息發送器：

復制代碼代碼如下:
// 創建一個定期（每5秒）發送消息到客戶端的發送器
var interval= setInterval(function(){
client.send('This is a message from the server! ' + new Date().getTime());
},5000);
服務器端將會每5秒推送消息到客戶端五、dojox.Socket和Socket.IOPersevere的創建者Kris Zyp創建了dojox.Socket。dojox.Socket以Dojo庫一致的方式封裝了WebSocket API，用于在客戶端不支持WebSocket時，使用long-polling替代。下面是怎樣在客戶端使用dojox.Socket和在服務器端使用Socket.IO的例子：

復制代碼代碼如下:
var args, ws= typeof WebSocket!= 'undefined';
var socket= dojox.socket(args= {
url: ws? '/socket.io/websocket' : '/socket.io/xhr-polling',
headers:{
'Content-Type':'application/x-www-urlencoded'
},
transport: function(args, message){
args.content = message;// use URL-encoding to send the message instead of a raw body
dojo.xhrPost(args);
};
});
var sessionId;
socket.on('message', function(){
if (!sessionId){
sessionId= message;
args.url += '/' + sessionId;
}else if(message.substr(0, 3)== '~h~'){
// a heartbeat
}
});
dojox.socket.Reconnect還創建了在套接字失去連接時自動重連。期待包含dojox.Socket的Dojo 1.6版本早日發布。六、實際應用和WebSocket資源有很多WebSocke的實際應用。WebSocket對于大多數客戶機-服務器的異步通信是理想的，在瀏覽器內聊天是最突出的應用。WebSocket由于其高效率，被大多數公司所使用。HTML5 WebSocket 相關資源整理如下：Socket.IO站點：http://socket.io/
WebSocket的Wikipedia：http://en.wikipedia.org/wiki/WebSockets
WebSockets.org站點：http://www.websockets.org/
Dojo WebSocket站點：http://www.sitepen.com/blog/2010/10/31/dojo-websocket/html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html水平分割線怎么設置？html水平分割線的代碼示例講解

下一篇：html中的圖片如何打包？html圖片打包的方法