Article catalog

• Introduce the principle of WebSocket. After understanding the principle, you can use it more confidently and boldly;
• Compare similar technologies to find out whether your business scenario needs to use WebSocket;
• Experience sharing in the process of use will make you less detours;

1. What is websocket

WebSocket is a new protocol for full duplex communication (unrestricted two-way communication) on a single TCP connection in HTML5. It can better save server resources and bandwidth, and can communicate in real time.

Full Duplex communication transmission allows data to be transmitted simultaneously in two directions, which is equivalent to the combination of two simplex communication modes. Transmission and reception are transmitted by two different transmission lines, and both sides of communication are both transmitters and receivers.

Websocket uses the same TCP port as HTTP and can bypass most firewall restrictions. By default, the websocket protocol uses port 80; Port 443 is used when running on TLS.

common problem:

Q: WebSocket Can be full duplex, why ordinary HTTP Can't you ask? (they are based on TCP Above the agreement, TCP This protocol realizes full duplex communication)
A: Actually HTTP Request for－"Reply mode" limits TCP This protocol supports full duplex communication.

Q: WebSocket and Socket Differences between
A: Socket It's not a protocol, it's an application layer and TCP/IP The intermediate software abstraction layer of communication is a set of interfaces. and WebSocket Is an application layer protocol.

Q: WebSocket Long connection and HTTP Difference between long connections
A: HTTP/1.1 Long connection is enabled by default( Connection:keep-alive)，The essence is TCP Long connection, available at one time TCP Multiple connections completed HTTP Request.
WebSocket The long connection is true full duplex, TCP After the link is established, both parties can send messages to each other without setting the request header, and both parties need to maintain the connection.

about HTTP Long connection, say a few more words and open the browser console network，Every request has a Connection ID，This means TCP Connected id，You may find more than one HTTP Requested Connection ID It's the same, which means they share one TCP connect.
in addition chrome Six domain names are allowed TCP Connection concurrency means that requests sent at the same time exceed this number and can only be queued

2 why use WebSocket

2.1 requirements description and application scenarios

• Requirements: the server needs to notify the client of data updates.
• Application scenarios: chat software, subscription, games, collaborative work (such as text editing), live broadcasting, stock funds, location-based applications, etc.

2.2 comparison of common solutions

WebSocket can solve the above requirements. In addition, common solutions include polling and long polling. In addition, html5 also provides a server sent event.

• Polling: the client sends an http request to the server regularly. After receiving the request, the server immediately returns the response information and closes the connection;
• Long polling: in order to solve the problem of too many invalid polling requests, long polling is optimized. After receiving the request, the server blocks first, returns data and closes the connection if necessary, and the client sends a new request to the server after processing the response information;
• Server sent event: provided by html5, which borrows the idea of long polling, but no longer only sends and receives one message per connection. The text data is changed into a stream to repeatedly send and receive messages on one connection;

• Server sent event is a case for wechat payment: https://www.jianshu.com/p/9a0e802b2297

SSE suffers from a limitation to the maximum number of open connections, which can be specially painful when opening various tabs as the limit is per browser and set to a very low number (6). The issue has been marked as "Won't fix" in Chrome and Firefox

• Long polling and SSE will occupy a limited number of browser connections (there are 6 in chrome), which looks very fatal

In addition, HTTP/2 provides the function of server push. Don't get confused with the above things. It's not the same thing at all. The server refers to the web server. The pushed object is the resource to be loaded by the browser. It is a technology used to improve the loading speed of the first screen. The relevant configuration needs to be enabled in the web server (such as nginx). You can refer to this article: https://www.cnblogs.com/wetest/p/8040202.html

3 WebSocket connection establishment process

WebSocket It's not a new agreement, it's a use of HTTP Protocol to establish a connection. Let's see WebSocket How connections are created.

3.1 the browser initiates an http request to establish a connection

The request address starts with ws: / /. The request header Upgrade: websocket and Connection: Upgrade indicate that the connection will be converted to a WebSocket connection.

• 1.1 establish TCP connection
• 1.2 the browser sends an HTTP request, carries the header information of the protocol upgrade, and shakes hands before the protocol upgrade

3.2 server response request

The response header HTTP/1.1 101 Switching Protocols and Upgrade: websocket indicates that the HTTP protocol of this connection will be changed (code 101) to the specified WebSocket protocol.

• 2.1 respond to HTTP handshake and return code 101
• 2.2 both parties can transmit information freely through this connection. The connection will continue. Both server and client can disconnect unilaterally

4 need to know & Practical Guide

4.1 correct use of ws and wss

• The protocol identifier of WebSocket is ws. On the TLS protocol, the identifier is wss, similar to https
• You must use wss as a secure link under https

WebSocket on TLS: first, the browser uses wss://xxx When creating a WebSocket connection, a secure connection will be created through HTTPS, and then the HTTPS connection will be upgraded to a WebSocket connection. The underlying communication still follows the secure SSL/TLS protocol.

4.2 using Nginx to proxy WebSocket requests

• Nginx has supported WebSockets since 1.3, and can do reverse proxy and load balancing for WebSocket applications. Official documents: http://nginx.org/en/docs/http/websocket.html
• When the client sends an HTTP request for protocol upgrade, Nginx does not know by default, and proxy needs to be configured_ set_ header Upgrade $http_ Upgrade and proxy_set_header Connection "Upgrade". After configuration, when the Nginx proxy server intercepts the upgrade request sent by the client, it will use 101 (Exchange Protocol) to return the response and establish a tunnel between the client, proxy server and back-end server to support WebSocket.
• Configuration example:

server {
    listen       80;
    server_name dev-staff-api-gateway.teyixing.com;
    rewrite ^(.*)$ https://${server_name}$1 permanent;
}
server {
    server_name dev-staff-api-gateway.teyixing.com;
    listen 443 http2 ssl;

    ssl_certificate conf.d/cert/teyixing.com.pem;
    ssl_certificate_key conf.d/cert/teyixing.com.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    # For WebSocket
    location /v1/webSocket {
        proxy_pass http://dev-staff-api-gateway/v1/webSocket; # http://call-center/v1/webSocket;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    # Block normal http requests
    location / {
        proxy_pass http://dev-staff-api-gateway;
    }
}

4.3 how to solve the problem of nginx cutting off the WebSocket connection

4.3.1 problem description

Sometimes it is found that the WebSocket connection is somehow broken, and the back-end log finds the following errors:

com.tehang.callcenter.application.websocket.WebSocketConnection.onError
java.io.EOFException: null
 at org.apache.tomcat.util.net.NioEndpoint$NioSocketWrapper.fillReadBuffer(NioEndpoint.java:1208)
 at org.apache.tomcat.util.net.NioEndpoint$NioSocketWrapper.read(NioEndpoint.java:1142)
 at org.apache.tomcat.websocket.server.WsFrameServer.onDataAvailable(WsFrameServer.java:72)
 at org.apache.tomcat.websocket.server.WsFrameServer.doOnDataAvailable(WsFrameServer.java:171)
 at org.apache.tomcat.websocket.server.WsFrameServer.notifyDataAvailable(WsFrameServer.java:151)
 at org.apache.tomcat.websocket.server.WsHttpUpgradeHandler.upgradeDispatch(WsHttpUpgradeHandler.java:148)
 at org.apache.coyote.http11.upgrade.UpgradeProcessorInternal.dispatch(UpgradeProcessorInternal.java:54)
 at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:53)
 at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:834)
 at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1417)
 at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
 at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
 at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
 at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
 at java.base/java.lang.Thread.run(Thread.java:834)

4.3.2 causes

• Nginx configuration item proxy_ read_ The default value of timeout is 60s, which indicates the time to wait for a response from the server. That is, when WebSocket uses nginx for forwarding, if there is no communication within 60s, nginx will cut off the connection.

4.3.3 solutions

• nginx proxy_read_timeout is set to no timeout
• The front end initiates heartbeat detection
• The front end calls reconnect in the WebSocket lifecycle method onError.

Advanced tutorial

[introduction to WebSocket] build a WebSocket multiplayer online chat room (SpringBoot+WebSocket)

https://blog.csdn.net/qqxx6661/article/details/98883166

[WebSocket] Chapter 2: distributed transformation of WebSocket Cluster -- realizing multi person online chat room

https://blog.csdn.net/qqxx6661/article/details/100064741

[WebSocket] use WebSocket to realize real-time multiplayer game

https://blog.csdn.net/qqxx6661/article/details/100597812