What is WebSocket

The server and client of WebSocket can communicate in both directions and allow cross-domain communication. Supported by the Upgrade mechanism of HTTP/1.1, communicating through the ws (non-encrypted) or wss (encrypted) protocol

HTML5

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

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

HTML5 only focuses on the client's <a href="http://m.miracleart.cn/js/js-weixinapp-api.html" target="_blank">API</a>, while the server side is Each language implements

// 創(chuàng)建一個Socket實例
var socket = new WebSocket('ws://localhost:8080');
// 打開Socket 
socket.onopen = function(event){
  // 發(fā)送一個初始化消息
  socket.send('I am the client and I\'m listening!');
  // 監(jiān)聽消息
  socket.onmessage = function(event){
    console.log('Client received a message',event);
  };
  // 監(jiān)聽Socket的關(guān)閉
  socket.onclose = function(event){
    console.log('Client notified socket has closed',event);
  };
  // 關(guān)閉Socket.... 
  //socket.close()
};

event
onclose onerror onmessage onopen

Properties

• ##readyState: CONNECTING 0 OPEN 1 CLOSING 2 CLOSED 3

• ##binaryType

  : String Blob ArrayBuffer<a href="http://m.miracleart.cn/wiki/58.html" target="_blank"></a>

  ##Compatibility

Method 1 :

If the client does not support WebSocket, then there are several candidates available
Flash Socket AJAX long-polling AJAX multipart streaming IFrame JSONP polling<a href="http://m.miracleart.cn/wiki/1488.html" target="_blank"></a>##Method 2

Socket.io To smooth out the differences, this library can automatically use the message push method supported by the browser to connect when the browser does not support WebSocket
. The library will also detect whether the connection is dropped, and Automatically reconnects for you when disconnected. <pre class='brush:php;toolbar:false;'>// 創(chuàng)建Socket.IO實例，建立連接 var socket= new io.Socket(&amp;#39;localhost&amp;#39;,{ port: 8080, }); socket.connect(); // 添加一個連接監(jiān)聽器 socket.on(&amp;#39;connect&amp;#39;,function(){ console.log(&amp;#39;Client has connected to the server!&amp;#39;); }); // 添加一個連接監(jiān)聽器 socket.on(&amp;#39;message&amp;#39;,function(data){ console.log(&amp;#39;Received a message from the server!&amp;#39;,data); }); // 添加一個關(guān)閉連接的監(jiān)聽器 socket.on(&amp;#39;disconnect&amp;#39;,function(){ console.log(&amp;#39;The client has disconnected!&amp;#39;); }); // 通過Socket發(fā)送一條消息到服務(wù)器 function sendMessageToServer(message){ socket.send(message); }</pre>Advantages<code>

Real-time two-way communication

• The browser has good local support (the compatibility can be used with third-party libraries) Solution)

• Support custom protocol

• Practical application

Chat room

• Server message push

• Front-end and back-end real-time system

• Reference

Websocket | MDN

• Get to know HTML5 WebSocket

• [Related recommendations]

1.

2. HTML5 full version manual

3. php.cn original html5 video tutorial

The above is the detailed content of What is WebSocket? In-depth understanding of WebSocket in html5. For more information, please follow other related articles on the PHP Chinese website!