What is Websocket? Parse Websocket in h5

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

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

Use Socket.io to smooth out the difference , 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 restart it for you when it is dropped. connect.

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

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

• [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? Parse Websocket in h5. For more information, please follow other related articles on the PHP Chinese website!