What is WebSocket? In-depth understanding of WebSocket in html5-H5 Tutorial-php.cn

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

零下一度

Release： 2017-05-08 13:46:08

Original

2130 people have browsed it

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

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

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

Copy after login

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(&#39;ws://localhost:8080&#39;);
// 打开Socket 
socket.onopen = function(event){
  // 发送一个初始化消息
  socket.send(&#39;I am the client and I\&#39;m listening!&#39;);
  // 监听消息
  socket.onmessage = function(event){
    console.log(&#39;Client received a message&#39;,event);
  };
  // 监听Socket的关闭
  socket.onclose = function(event){
    console.log(&#39;Client notified socket has closed&#39;,event);
  };
  // 关闭Socket.... 
  //socket.close()
};

Copy after login

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

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!