The HTML5 specification has brought us many new features on the basis of traditional web interaction. As web technology is widely used in the development of web APP, these new features have been promoted and used, and websocket is a new web communication technology. of great significance.
What is Socket? What is WebSocket?
For those who are hearing about WebSocket technology for the first time, what is the difference between the two? Is websocket an implementation that just ported the concept of sockets to the browser?
We know that two applications (processes) in the network need full-duplex communication with each other (full-duplex means that both parties can send messages to each other at the same time), and what needs to be used is socket, which can provide end-to-end communication. For As a programmer, he only needs to create a socket instance on one side of an application (let's call it a client) and provide the IP address and port of the side it wants to connect to (let's call it a server), and the other side (Server) Create another socket and bind the local port to listen, and then the client connects to the server. After the server accepts the connection, the two parties establish an end-to-end TCP connection, on which two-way communication is possible, and Once this connection is established, there is no client-server distinction between the two communicating parties, and end-to-end communication is provided. We can take this approach to build a desktop im program that lets users on different hosts send messages. In essence, socket is not a new protocol, it is just an encapsulation of tcp/ip protocol family communication mechanism for the convenience of programmers in network programming.
Websocket is a part of the html5 specification. It draws on the idea of sockets and provides a full-duplex communication mechanism between the web application client and the server (note that it is the client server). At the same time, it is a new application layer protocol. The websocket protocol is an application layer protocol specially formulated to provide full-duplex communication between web applications and servers. Usually it is expressed as: ws://echo.websocket .org/?encoding=text HTTP/1.1, you can see that except the previous protocol name is different from http, its representation address is the traditional url address.
It can be seen that websocket is not a simple transplant of the concept of socket in the browser environment. At the end of this article, a small demo will be used to further describe the difference between the use of socket and websocket.
The communication principle and mechanism of WebSocket
Since it is based on the web technology on the browser side, its communication must be http. Although websocket itself is also a new application layer protocol, it cannot exist independently of http. Specifically, we build a websocket instance on the client and bind it with a server address that needs to be connected to. When the client connects to the server, it will send an http message similar to the following to the server: instant messaging chat Software app development can add Weikeyun's v:weikeyyun24 consulting
It can be seen that this is an http get request message. Note that there is an upgrade header in the message. Its function is to tell the server that the communication protocol needs to be switched to websocket. If the server supports the websocket protocol, it will Switch its own communication protocol to websocket, and send a response header similar to the following to the client at the same time:
The returned status code is 101, indicating that the client protocol conversion request is agreed and it is converted to the websocket protocol. The above process is all done using http communication, which is called websocket protocol handshake. After this handshake, the client and the server establish a websocket connection, and the subsequent communication is based on the websocket protocol. Therefore, it is concluded that the websocket handshake needs to rely on the http protocol, and the communication process uses the websocket protocol after the connection is established. At the same time, it should be understood that the websocket connection is still based on the TCP connection we just initiated the http connection. Once the connection is established, we can transfer data. Websocket provides two kinds of data transfer: text data and binary data.
Based on the above analysis, we can see that websocket can provide low-latency, high-performance two-way data communication between client and server. It subverts the request processing and response mode of previous web development, and provides a real client request and server push data mode, which is especially suitable for real-time data interaction application development.
Before the emergence of WebSocket technology, what were the methods for implementing instant messaging on the Web side?
How to poll periodically
The client continuously sends requests to the server at a certain time interval, requests the latest data from the server, and then updates the client display. This method actually wastes a lot of traffic and puts a lot of pressure on the server.
SSE (Server-Sent Event, server-side push event)
SSE (Server-Sent Event, server-side push event) is an HTML5 technology that allows the server to push new data to the client. This is a better solution than having the client poll for new data from the server every few seconds.
Compared to WebSocket, it can also push data from the server to the client. What WebSocket can do, SSE can do, and vice versa, but they each have their own strengths and weaknesses when it comes to accomplishing certain tasks. About the introduction of SSE, Instant Messaging Network will introduce it in detail in a later article.
Comet technology
Comet is not a new communication technology, it is a hacking technology in the mode where the client requests the server. Generally speaking, it is mainly divided into the following two approaches:
(1) Server push technology based on long polling
Specifically, the client first sends a request to the server. After the server receives the request, if the data is not updated, it does not return immediately, and the server blocks the return of the request. , until the data is updated or a connection timeout occurs, after the server returns the data, the client sends the same request again.
(2) The usual practice for long connections based on streaming data transmission
is to embed a hidden iframe in the page, and then let the src attribute of this iframe point to a server address we requested, and for data update, we will update the data on the page. The update operation is encapsulated as a js function, and the function name is passed as a parameter to this address.
After receiving the request, the server parses the address and takes out the parameters (the name of the client-side js function call). Whenever there is data update, it returns the call to the client-side function, and fills the returned content with the data to be updated with the parameters of the js function. Among them, for example, returning a string like "<script type="text/javascript">update("data")</script>" means calling the client update function with data as the parameter to update the client view.
Of course, this does not mean that these technologies are useless. Even if websocket has been proposed and implemented as a specification, for old browsers, we still need to downgrade it to the above methods to achieve real-time interaction and server-side data push.