Home > Developer > Web Develop
As we all know, the HTTP protocol is stateless and interacts with the server based on Request/response, which is what we often call the single-mode. However, with the development of the Internet, the two-way communication between the browser and the server is increasing, and the way of long polling to the servers to get the latest data and push effect is becoming more and more satisfying. HTML5 Standard, also provides us with the browser and the service side of the Duplex Communication protocol WebSocket.
The format of the WebSocket protocol is "Ws://ip:port" or "Wss://ip:port". Where WSS represents the WebSocket protocol for encrypted transmissions.
The WebSocket protocol, like the traditional socket protocol, requires a "handshake". However, the "handshake" phase of websocket is done through the HTTP protocol, and the "handshake" behavior is accomplished through the Request/response header, which requires only a small exchange of data to create a duplex channel based on the TCP/IP protocol. Let's take a look at the WebSocket handshake request that fiddler intercepted.
With Fiddler we can see that, at the time of the handshake request, the client sends a GET request to the server and adds so many keys to the requested header
Origin:http://ip:port represents the address of the client
Connection:upgrade/upgrade:websocket says this request is for WebSocket handshake action.
Sec-websocket-version:13 represents the WebSocket version information supported by the browser
Sec-websocket-key: This is a randomly generated string by the client
In the handshake information for the server response sec-websocket-accept: The value of the server is computed and encrypted by the value of the Sec-websocket-key of the client header.
And the server's response status of 101 indicates that the server side has understood the client's requirements, and the client needs to switch to the new protocol to complete subsequent communication based on the protocol type in upgrade.
This time our TCP/IP Duplex channel has been established, the WebSocket protocol is so simple.
Speaking of theoretical knowledge, let's look at how to use the WebSocket protocol in a browser.
The latest Firefox, Chrome, IE10 and above have already supported the WebSocket protocol. But when it comes to using it, we need to first detect if the browser supports the WebSocket protocol
The WebSocket object is located under the Window object. We can detect browser support for WebSocket with the following code:
View Codeif inch window) if (window. WebSocket) If in windowif(window. Mozwebsocket)
If our browser supports websocket then we can create an instance of WebSocket.
var ws=New WebSocket ("ws://localhost:2012"); var ws=New mozwebsocket ("ws://localhost:2012");
It is important to note that when we create an instance of WebSocket, the WebSocket instance has started to initiate a handshake request to the server, and we do not need to open the connection manually.
The WebSocket object is also very simple and we will use it for 4 callback methods OnOpen OnClose onerror onmessage. They are triggered after the actual handshake is complete and after the TCP/IP channel is created, after disconnecting, an error occurs when the server-side message is received.
In addition, we often use a property readyState to check the connection state, and a function send () sends data to the server.
Below we will complete a complete browser using WebSocket example, here need to service side also support WebSocket protocol
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>WebSocket Example</title> <Scripttype= "Text/javascript"> varws;//WebSocket Object varWsurl= "ws://localhost:2012";//server-side address that supports the WebSocket protocol functionconnection () {//determine what kind of websocket object to use if ("WebSocket" inchwindow) {ws= NewWebSocket (Wsurl); } Else if ("Mozwebsocket" inchwindow) {ws= NewMozwebsocket (Wsurl); } Else{alert ("The current browser does not support WebSocket"); } //Registering various callbacksWs.onopen= function() {alert ("Connection Server succeeded"); } ws.onclose= function() {alert ("disconnecting from the server"); } ws.onerror= function() {alert ("data transfer Error occurred"); } ws.onmessage= function(receivemsg) {alert (receivemsg.data); } } functionSendMessage () {//attempt to send a message to the serverWs.send ("Hello World"); } </Script></Head><Body> <inputtype= "button"value= "Connection"onclick= "Connection ()" /> <inputtype= "button"value= "Send"onclick= "SendMessage ()" /></Body></HTML>View Code
The full sample code here to download the sample code for the service side is based on the. NET Framework 4.5 developed with VS2012 because of a problem with the. NET 4.0 version of the server WebSocket framework ...
Next article we will talk about how to use the Superwebsocket framework to build our own WebSocket server
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
