Shulou(Shulou.com)06/03 Report--

How to use HTML5's WebSocket to achieve server-side and client-side data communication, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

WebSocket protocol is a new network protocol based on TCP. WebSocket is a network technology that HTML5 began to provide for full-duplex communication between browsers and servers. Depending on this technology, we can realize the long connection between the client and the server, and the two-way real-time communication.

The most important feature of WebSocket is that the server can actively push information to the client, and the client can also actively send information to the server, which is a real two-way equal dialogue, which belongs to a kind of server push technology.

WebSocket is widely used in social chat, live streaming, on-screen comments, multi-player games, collaborative editing, real-time quotes of stock funds, live sports updates, video conferencing / chat, location-based applications, online education, smart home and other scenarios that require high real-time.

WebSocket features:

Based on the TCP protocol, the server-side implementation is relatively easy. It has good compatibility with HTTP protocol and can pass through all kinds of HTTP proxy servers. The data format is lightweight, the performance overhead is small, and the communication is efficient. You can send text or binary data. There is no homologous restriction, and the client can communicate with any server. The protocol identifier is ws (or wss if encrypted) and the server URL is URL. Can realize the data push in the real sense.

This paper uses an example to explain the process of using WebSocket of HTML5 to realize the process of sending and receiving data between server and client.

Client

In WebSocket API, the browser and the server only need to shake hands, and then a fast channel is formed between the browser and the server. Data can be transmitted directly between the two.

The browser sends a request to the server to establish a WebSocket connection through JavaScript. After the connection is established, the client and the server can exchange data directly through the TCP connection.

When you get the Web Socket connection, you can send data to the server through the send () method and receive the data returned by the server through the onmessage event.

This example provides an input box for entering a message and a button for sending a message to the server.

Send

If ("WebSocket" in window) {var ws = new WebSocket ("ws://192.168.1.90:8088"); var result = document.querySelector ('# result'); ws.onopen = function () {result [XSS _ clean] = 'connected!' ; console.log ('connected!') ;} document.querySelector ('form'). Onsubmit = function (e) {var msg = document.querySelector (' # m'). Value; ws.send (msg); return false;} ws.onmessage = function (e) {console.log (e.data); result [XSS _ clean] = e.data;} ws.onclose = function () {console.log ('connection closed!') ;}} else {alert ('your browser does not support websocket') ;}

In the above code, you can create a WebSocket object using new WebSocket ().

Ws.onopen event, which is triggered when a connection is established.

Ws.onmessage event, which is triggered when the client receives server data.

Ws.onclose event, which is triggered when the connection is closed.

Ws.onclose event, which is triggered when a communication error occurs.

The ws.send () method, which uses the connection to send data.

The client code, accessed in the browser, can establish a websocket connection with the server (192.168.1.90). When the information is entered, click the send button, and the client immediately sends a message to the server and receives the message from the server.

Server side

Before executing the client program, you need to create a service that supports websocket, that is, you need server-side locale support. At present, the mainstream back-end language java,php,python,nodejs,.net and so on have related modules to support websocket. In this example, we use nodejs as the server environment and support websocket by installing the nodejs-websocket module.

In this case, I use a virtual machine as the server, the liunx environment, and the IP is 192.168.1.90.

Var ws = require ("nodejs-websocket"); / introduce websocket module console.log ("start establishing connection..."); / / background print status information var server = ws.createServer (function (connect) {/ / create a new connection connect.on ("text", function (msg) {/ / receive trigger event console.log ("message received is:" + msg) / / print out if (msg) in the background after receiving the new message (msg) {/ / if the message is not empty, send the received message to the client connect.send ('the server has received the message:' + msg + 'the server sent the message: Hello,' + msg);}});}) .messages (8088)

Save it as an index.js file, then run: node index.js, at which point the server runs, and nodejs is listening on port 8088. Open the client with a browser, enter information, and click send to try.

When we enter "Li Wang" and send it, the server receives the message with the content of "Li Wang" and sends the corresponding message to the client. The effect is as shown in the figure:

Of course, in the actual production environment, we can use PM2 to control the nodejs program to run in the background, using Nginx as a reverse proxy, without exposing the server ip and port to the external network.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.