Html5 + js +. Net instant multiplayer chat

Today, I read about websocket and learned that this is a new feature of html5. it is mainly used for real-time web communication. In the past, the client obtained data from the server by sending a request through the client. The server responds to the request, or by sending a request from the backend at intervals through ajax, and then updates the page information, this round robin method makes the user feel that the page is "real-time response". This method is simple but not free from some violence. In addition, each request has a TCP three-way handshake with http header information, the server indicates that the pressure is high, which causes performance and latency problems.

Later in the technical solution, long polling, Comet, browser plug-in (flash) and Java were introduced to push messages to the client, but there were some drawbacks.

The emergence of WebSocket means another solution. It provides a TCP-based bidirectional, full-duplex (data can be received while both are synchronized) socket connection. When websocket is used, once the handshake is completed between the server and the client, the information can be freely exchanged between the two ends, without the attachment of useless http header information, reducing bandwidth usage and improving performance, reduces latency. However, the disadvantage is that browser support is insufficient, such as IE, which is only supported by IE10.

Now we can use a simple example to talk about its application process. First, let's go up and down:

("WebSocket" window) {socket = WebSocket ("ws: // localhost: 13458/Socket/SocketHandler. ashx ");" your browser does not support WebSocket. Switch to a later version or use chrome firefox "socket. onopen = isSocketConnect = "# btnWs "). val ("Disconnect" "enter chat room" socket. onmessage = socket. onclose = "socket closed! "Socket. onerror =" socket connect error"

Of course, the client can also send messages to the server. The sending event is socket. send (data); data indicates the data sent to the server: The specific code is as follows:

(Socket. readyState = ($ ("# txtMsg"). val () = ""(!; ($ ("# UserName "). val () = "" d = "# userName "). val ("Tourist" + d. getMinutes () + "_" + d. getSeconds () + "_" + (! = "" + $ ("# UserName "). val () + ":" + "<div class = 'divchat'>" + $ ("# txtMsg "). val () + "</div>" = "" + $ ("# userName "). val () + "" + "# txtMsg "). val (""); $ ("# txtMsg"

2. Server Response

Here, we add a general processing program to respond to and push client messages. One thing we need to do is to broadcast messages sent from the client to other clients to implement instant multi-person chat, the implementation principle here is also very simple, that is, to store all the connections with the list, and then traverse the list set to send messages to each client. The specific implementation code is as follows:

           List<WebSocket>  (WebSocketList == =  List<WebSocket> (contexts) =>= (<> buffer =  ArraySegment<>( [=                      clientMessage = Encoding.UTF8.GetString(buffer.Array,  (socket.State ==                        clientMessage = DateTime.Now.ToString() +             +=  ArraySegment<>                         (!                         (WebSocket item  item.SendAsync(buffer, WebSocketMessageType.Text,  (socket.State ==

Reference: Use HTML5 WebSocket to build real-time Web applications

Source code download

Ps: Leaving, looking ...... Guangzhou/Shenzhen onlookers resume

If you like it, move your finger to support it! Your support is my greatest motivation!