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

What is WebSocket

The server and client of WebSocketcan communicate in both directions and allow cross-domain communication. Supported by theUpgrademechanism ofHTTP/1.1, communicating through thews(non-encrypted) orwss(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

HTML5only focuses on the client'sAPI, 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() };

Copy after login

event
oncloseonerroronmessageonopen

Properties

##readyState:CONNECTING 0OPEN 1CLOSING 2CLOSED 3
##binaryType
:StringBlobArrayBuffer
##Compatibility

Method 1 :

If the client does not supportWebSocket, then there are several candidates available
Flash SocketAJAX long-pollingAJAX multipart streamingIFrameJSONP polling##Method 2

Using

Socket.ioTo smooth out the differences, this library can automatically use the message push method supported by the browser to connect when the browser does not supportWebSocket
. The library will also detect whether the connection is dropped, and Automatically reconnects for you when disconnected.

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

Copy after login

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!