What is WebSocket? In-depth understanding of WebSocket in html5

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

WebSocket

HTML5

in

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://www.php.cn/js/js-weixinapp-api.html" target="_blank">API</a>, while the server side is Each language implements

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

event
onclose onerror onmessage onopen

Properties

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

• ##binaryType

  : String Blob ArrayBuffer<a href="http://www.php.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://www.php.cn/wiki/1488.html" target="_blank"></a>##Method 2

Using

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:html;toolbar:false;">// 创建Socket.IO实例，建立连接 var socket= new io.Socket(&amp;#39;localhost&amp;#39;,{ port: 8080, }); socket.connect(); // 添加一个连接监听器 socket.on(&amp;#39;connect&amp;#39;,function(){ console.log(&amp;#39;Client has connected to the server!&amp;#39;); }); // 添加一个连接监听器 socket.on(&amp;#39;message&amp;#39;,function(data){ console.log(&amp;#39;Received a message from the server!&amp;#39;,data); }); // 添加一个关闭连接的监听器 socket.on(&amp;#39;disconnect&amp;#39;,function(){ console.log(&amp;#39;The client has disconnected!&amp;#39;); }); // 通过Socket发送一条消息到服务器 function sendMessageToServer(message){ socket.send(message); }</pre>Advantages

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.

Free h5 Online video tutorial

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!