**Listen to server events**
**The first type of websocket communication**
WebSocket is a full-duplex communication that can naturally realize communication between multiple tabs. WebSocket is a new protocol of HTML5. Its purpose is to establish an unrestricted two-way communication channel between the browser and the server. For example, the server can send messages to the browser at any time. Why can't the traditional HTTP protocol achieve the functions realized by WebSocket? This is because the HTTP protocol is a request-response protocol. The request must be sent by the browser to the server before the server can respond to the request and then send the data to the browser. Some people say that the HTTP protocol can actually be implemented, such as polling or Comet. The disadvantage of this mechanism is that the real-time performance is not enough, and the frequent request will bring great pressure to the server. Comet is also polling in nature, but when there is no news, the server will delay for a while and wait until there is a message before replying. This mechanism temporarily solves the real-time problem, but it brings a new problem: a server running in multi-threaded mode will cause most threads to be suspended most of the time, which greatly wastes server resources. In addition, when an HTTP connection has no data transmission for a long time, any gateway on the link may close the connection, and the gateway is out of our control. This requires the Comet connection to periodically send some ping data to indicate the connection. normal work". WebSocket is not a brand new protocol, but uses the HTTP protocol to establish a connection. Why can WebSocket connection achieve full-duplex communication but HTTP connection cannot? In fact, the HTTP protocol is built on top of the TCP protocol. The TCP protocol itself realizes full-duplex communication, but the request-response mechanism of the HTTP protocol limits the full-duplex communication. After the WebSocket connection is established, it is actually just a simple rule: Next, we will not use the HTTP protocol for communication, and send data directly to each other. The secure WebSocket connection mechanism is similar to HTTPS. First, when the browser uses wss://xxx to create a WebSocket connection, it will first create a secure connection via HTTPS. Then, the HTTPS connection is upgraded to a WebSocket connection, and the underlying communication is still using the secure SSL/TLS protocol.
The WebSocket connection must be initiated by the browser. Features:
(1) Based on the TCP protocol, the server-side implementation is relatively easy.
(2) It has good compatibility with HTTP protocol. The default ports are also 80 and 443, and the HTTP protocol is used in the handshake phase, so it is not easy to block during the handshake and can pass through various HTTP proxy servers.
(3) The data format is relatively lightweight, the performance overhead is small, and the communication is efficient.
(4) You can send text or binary data.
(5) There is no homology restriction, and the client can communicate with any server.
(6) The protocol identifier is ws (if encrypted, it is wss), and the server website is the URL.
Example: Browser-side code
```js
// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');
// Connection opened
socket.addEventListener('open', function (event) {
socket.send('Hello Server!');
});
// Listen for messages
socket.addEventListener('message', function (event) {
console.log('Message from server ', event.data);
});