Was ist WebSocket? Vertiefendes Verständnis von WebSocket in HTML5

Was ist WebSocket?

WebSocketDer Server und der Client können in beide Richtungen kommunizieren und eine domänenübergreifende Kommunikation ermöglichen. Unterstützt durch den HTTP/1.1-Mechanismus von Upgrade, Kommunikation über ws (unverschlüsselt) oder wss (verschlüsselt) Protokolle

WebSocket WebSocket(
  in DOMString url,
  in optional DOMString protocols
);

WebSocket WebSocket(
  in DOMString url,
  in optional DOMString[] protocols
);

WebSocket in HTML5

HTML5Konzentrieren Sie sich nur auf den Kunden<a href="//m.sbmmt.com/js/js-weixinapp-api.html" target="_blank">API<code><a href="//m.sbmmt.com/js/js-weixinapp-api.html" target="_blank">API</a> und auf der Serverseite implementiert jede Sprache das Ereignis

// 创建一个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()
};

onclose onerror onmessage onopen

Attribute

• readyState: CONNECTING 0 OPEN 1 CLOSING 2 CLOSED 3

• binaryType: String Blob <a href="//m.sbmmt.com/wiki/58.html" target="_blank"> Array<code><a href="//m.sbmmt.com/wiki/58.html" target="_blank">Array</a>BufferPuffer

Kompatibilität

Methode 1:
Wenn der Client WebSocket nicht unterstützt, dann Sie kann mehrere Kandidatenoptionen verwenden Flash Socket AJAX long-polling AJAX multipart streaming IFrame <a href="//m.sbmmt.com/wiki/1488.html" target="_blank">JSON <code><a href="//m.sbmmt.com/wiki/1488.html" target="_blank">JSON</a>P pollingP-Abfrage

Methode 2
Verwenden Sie Socket.io, um die Unterschiede auszugleichen. Diese Bibliothek kann den Browser automatisch abfragen, wenn der Browser WebSocket nicht unterstützt Verwenden Sie zum Herstellen der Verbindung die vom Browser unterstützte Push-Nachrichtenmethode. Die Bibliothek erkennt auch, ob die Verbindung unterbrochen wurde, und stellt automatisch die Verbindung wieder her, wenn sie unterbrochen wird.

// 创建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);
}

Vorteile

• Zwei-Wege-Kommunikation in Echtzeit

• Die native Unterstützung des Browsers ist gut (Kompatibilität kann genutzt werden). Bibliotheken von Drittanbietern (Sehr einfach zu lösen)

• Unterstützung benutzerdefinierter Protokolle

Praktische Anwendung

• Chatroom

• Server-Nachrichten-Push

• Front-End- und Back-End-Echtzeitsystem

Referenz

• Websocket | ]

1.
• Kostenloses h5-Online-Video-Tutorial

2.

3 .cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist WebSocket? Vertiefendes Verständnis von WebSocket in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!