1. Introduction
This article first explain the characteristics of the application scenario and WebSocket then explain by the front and rear end of the sample code, in the actual development of the application display.
1.1. Scenario
WebSocket protocol is a full duplex communication over a single TCP connection, to meet the growing Web-based real-time communication needs arising. We usually contact mostly HTTP interface, but can not meet our needs in some business scenarios, this time we need to use WebSocket. Simple two examples:
(1) map page to be displayed in real time online staff coordinates: the traditional approach based on HTTP interface is polled each polling updated with the latest coordinate information.
(2) mobile phone payment code page after successful payment in external payment code scanning equipment, mobile payment code page prompts "successful payment" and automatically shut down: the traditional way or polling, payment code page has been calling interface, from the server to succeed until after payment of the state, the phone prompts "successful payment" payment code and close the page.
HTTP protocol has a flaw: communication can only be initiated by the client. This characteristic of unidirectional request, doomed if the server has a continuous state of change, the client should know very troublesome. We can only use the "poll": from time to time, it sends a query to understand the server has no new information. But in this way that is a waste of bandwidth (HTTP HEAD is relatively large), and consume server CPU utilization (information should not accept the request).
In the period WebSocket API has not yet been realized and published many browsers, developers need to receive real-time notification when developing an application from the server, we had to resort to some of the "hacks" to simulate real-time access to real-time communication, the most popular one ways is long polling. The main issue is a long polling request to the HTTP server, and the server keep the connection open to allow the response at a later time (determined by the server). To work efficiently this connection, a number of techniques to be used to ensure that the message is too good, on the server side as the connection information and recording a plurality of caches (per client). Although long polling can solve this problem, but it will consume more resources, such as CPU, memory and bandwidth, real-time communication in order to solve the problem of good will need to design and publish a new protocol
1.2. WebSocket defined
WebSocket is a protocol equivalent to HTTP is a network protocol, both of which are application layer protocols are based on the TCP protocol. However WebSocket is a bidirectional communication protocol, after a connection is established, the server and client can WebSocket sends or receives data to each other. Meanwhile, WebSocket connection is established at the time of need the help of HTTP protocol, the connection is established after a good two-way communication between the client and server HTTP nothing to do with it.
Compared to the traditional HTTP each "request - response" every client and server to establish the connection mode, WebSocket is a long-mode connection. Once WebSocket connection is established, unless the client or the server in one end of the active disconnected, or that are not required for each HTTP request data before the data transmission.
WebSocket the API provides a set of objects, for creating and managing WebSocket connection, and transmitting and receiving data through the connection. Provided by the browser WebSocket API is very simple, call the following example:
HTTP, WebSocket application layer protocol, to transfer data are based on the TCP protocol. We can understand these advanced protocols TCP pairs package. Since we are using the TCP protocol, then we connect and disconnect, must follow the TCP three-way handshake protocol and four-way handshake, but different content sent after the connection or disconnection of a different time. For WebSocket, it must rely on HTTP protocol handshake after handshake succeeds, the data transmission channel from TCP, HTTP with nothing to do directly.
2. The back-end WebSocket service (SpringBoot)
pom.xml
ServerEndpointExporter registered in the configuration of the Bean class @Configuration, the bean will be automatically registered to use @ServerEndpoint annotation statement Websocket endpoint
Creation of tools WebSocket.java WebSocket
3. WebSocket this code is over, run the SpringBoot project, corresponding WebSocket address: ws: //127.0.0.1: port / websocket / {userId}
can test the backend interface on the WebSocket online test site.
Front-end WebSocket call (Angular)
3.1. Npm dependent
dependent libraries are installed rxjs
Installation websocket dependent libraries
Installation type definition files
3.2. WebSocket Service
to create a WebSocket of Service file
Websocket.service.ts above command generates files, sample code:
3.3. Demo presentation
simply be a demo page, there are message boards and input box. Simultaneously open multiple browser page, as long as any one page of text input box, message boards will all pages displayed in real time.
Sample code is provided,
app.component.html
app.component.ts
app.component.css
I venture team product MadPecker, mainly to do BUG management, test management, application delivery, web site: www.madpecker.com, a friend in need are welcome to try, to experience!
This article MadPecker technical team to write, reproduced, please indicate the source