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

Editor to share with you how to use html5's websocket to achieve websocket chat rooms. I hope you will get something after reading this article. Let's discuss it together.

What is websocket?

WebSocket protocol is a new protocol of html5 date, which aims to realize full-duplex communication between browser and server. Students who have seen the link above must have known how inefficient and expensive (and thus comet) did this in the past, but in websocketAPI, 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. Doing so at the same time has two advantages. Communication transmission byte reduction: compared with the previous use of http to transmit data, websocket transmits less additional information, according to Baidu, only 2k2. The server can actively push messages to the client instead of the client to inquire about concepts and benefits. It is everywhere on the Internet, without further discussion, simply take a look at its principle, and then start to write a website version of the chat room to shake hands.

In addition to the three-way handshake for TCP connections, the websocket protocol requires an additional handshake between the client and the server to establish a connection. In the latest version of the protocol, the client sends a request to the server.

Copy the code

The code is as follows:

GET/HTTP/1.1 upgrade: websocket connection: upgrade host: 127.0.0.1 Sec-WebSocket- 8080 Source: http://test.com syntax: no cache control: no cache key: OtZtd55qBhJF2XLNDRgUMg==Sec-WebSocket- version: 13Sec-WebSocket extension: x-webkit-deflate-frame user agent: Mozilla/5.0 (Macintosh;IntelMacOSX10_9_0) AppleWebKit/537.36 (KHTML, for example, Gecko) Chrome/31.0.1650.57Safari/537.36

Server defined response

Copy the code

The code is as follows:

HTTP/1.1101 Exchange Protocol upgrade: websocket connection: upgrade Sec-WebSocket- acceptance: xsOSgr30aKL2GNZKNHKmeT1qYjA=

The "Sec-WebSocket-Key" in the request is random, and the server will use this data to construct an information summary of the SHA-1. Add "Sec-WebSocket-Key" to the magic string "258EAFA5-E914-47DA-95CA-C5AB0DC85B11". It is encrypted with SHA-1, then BASE-64 encoded, and the result is returned to the client (from Wikipedia) as the value of the "Sec-WebSocket-Accept" header. WebsocketAPI

API through the web browser is really simple, take a look at the definition of W3C

Copy the code

The code is as follows:

Enumerate BinaryType {"blob", "arraybuffer"}; [Constructor (DOMStringurl, optional (DOMString or DOMString []) protocol) Interface WebSocket:EventTarget {read-only properties DOMStringurl;// ready state constunsignedshortCONNECTING=0;constunsignedshortOPEN=1;constunsignedshortCLOSING=2;constunsignedshortCLOSED=3; read-only properties unsignedshortreadyState;readonly properties unsignedlongbufferedAmount;// networking properties EventHandleronerror; properties EventHandleronclose; read-only properties DOMString extension

Read-only attribute DOMString protocol; voidclose ([Clamp] optional unsigned short code, optional DOMString reason); / / messaging property EventHandleronmessage; property BinaryTypebinaryType; invalid send (DOMStringdata); invalid send (Blob data); invalid send (ArrayBufferdata); invalid send (ArrayBufferViewdata);}

Create websocket

Copy the code

The code is as follows:

Ws=newWebSocket (address); / / ws://127.0.0.1:8080

Call its constructor, the expected address, and you can create a websocket, which is called the address protocol. Ws/wss must turn off the socket.

Copy the code

The code is as follows:

Ws.close ()

Calling the close () method of the webservice instance can close the webservice, of course, it can also trigger a code and a string explaining why several variable function handles are closed and causing its initialization to execute, so the function is naturally necessary. There are four important onopen: call message after connection creation: call error after receiving server message: call onclose when error: call when connection is closed

You can see what it does by looking at the name. Every other function subscribes to an event object. You can access the message through event.data and use API. We can assign a value to the setting function after the socket is created successfully.

Copy the code

The code is as follows:

Ws=newWebSocket (address); ws.onopen=function (e) {varmsg=document.createElement ('div'); msg.style.color='#0f0'; MSG [XSS _ clean] = "Server > connection open." ; msgContainer.appendChild (msg); ws.send ('{}')

You can also use event binding.

Copy the code

The code is as follows:

Ws=newWebSocket (address); ws.addEventListener ('open',function (e) {varmsg=document.createElement (' div'); msg.style.color='#0f0'; MSG [XSS _ clean] = "Server > connectionopen." ; msgContainer. AppendChild (msg); ws.send ('{}')

In fact, the implementation of the client is relatively simple, except for a few sentences related to websocket, which are some simple functions such as auto-focus, enter event handling, message box automatically locating to the bottom, and so on.

After reading this article, I believe you have a certain understanding of "how to use html5's websocket to achieve websocket chat rooms". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.