Real-time video text transmission (on) through (Node Js |. Net) WebSocket Based on HTML5)

HTML5 has many notable new features, such as Canvas, local storage, multimedia programming interfaces, WebSocket, and so on. Although everyone is very enthusiastic about it, I personally think it requires the support of other platforms to truly "fire ".

I used to explain in detail other methods such as ajax-based "polling" and "long polling" during web communication.

Round robin:

This is the earliest solution to implement real-time Web applications. The client sends a request to the server at a certain interval, and maintains the synchronization between the client and the server in the form of frequent requests. The biggest problem with this synchronization solution is that when the client initiates a request to the server at a fixed frequency, the data on the server may not be updated, which will lead to a lot of unnecessary network transmission, therefore, this is a very inefficient real-time solution.

Long polling:

Long round robin improves and improves regular round robin to reduce invalid network transmission. When no data is updated on the server, the connection will be retained for a period of time until the data or status changes or the time expires. This mechanism can be used to reduce the interaction between invalid clients and servers. Of course, if the data on the server is frequently changed, this mechanism does not substantially improve performance compared with regular polling.

Stream:

The stream technology solution usually sends a persistent connection request to the server using a hidden window on the client page. The server responds to this request and constantly updates the connection status to ensure that the connection between the client and the server does not expire. This mechanism can continuously push server information to the client. This mechanism has a problem in user experience. You need to design different solutions for different browsers to improve the user experience. At the same time, when the concurrency is large, it is a great test for server resources.

Recently, WebSocket was very popular. Long polling that was used for communication later. on the Net platform, use the "SignalR (if you are interested, you can discuss it with me. I will not talk about it much here)". You can refer to jabbr (a multi-person Chat Room Based on it, you may not be able to access this website. Please bring your own XX tool to visit it.) Is it great to discuss the technology with foreigners?

A Brief Introduction to SignalR

SignalR is an integrated client and server library. browser-based clients and ASP. NET-based server components can be used for two-way multi-step dialogs. In other words, this dialog can exchange a single stateless request/response data without restriction; it will continue until it is explicitly closed. A dialog is made through a permanent connection. The client can send multiple messages to the server and the server can reply accordingly. It is worth noting that the server can also send asynchronous messages to the client. Similar to AJax, it is based on existing technologies. Itself is a complex. Generally, SignalR uses long polling of Javascript to implement communication between the client and the server. After the emergence of WebSockets, SignalR also supports WebSockets communication (provided that the. NET4.5 version is based on iis8 ). Of course, SignalR also uses the server's parallel task processing technology to improve the scalability of the server.

According to the official statement, SignalR can implement full-duplex communication, that is, real-time communication, and it has the concept of "pushing messages". By viewing its documentation and source code, it can be found that it is also very intelligent (automatically checks whether the current browser and server support websocket. If yes, use websocket for communication or long polling ), which of the following is the best cross-platform Mono !!!!

Mono!

What a cool x framework! Shenma IOS Android can use it! In addition, Android has a framework called SignalA (Signal for Android, but it only supports the connection mode of Persistent Connections) which can perfectly combine with. Net for communication. I have used ^_^.

In Node Js, there is a visual method of socket. io, which is similar to SignalR (referring to the Signal Hub Connection method.

---------------------------- Gorgeous split line -------------------------------------------

Continue to say that WebSocket can see some things from w3c, such

Content sent from the client to the server:

1. GET/chat HTTP/1.1
2. Host: server.example.com
3. Upgrade: websocket
4. Connection: Upgrade
5. Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ =
6. Origin: http://example.com
7. Sec-WebSocket-Protocol: chat, superchat
8. Sec-WebSocket-Version: 13
Contents from the server to the client: 1. HTTP/1.1101 SwitchingProtocols
2. Upgrade: websocket
3. Connection: Upgrade
4. Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK + xOo =
5. Sec-WebSocket-Protocol: chat
For more information about this concept, see WebSocket (1) -Concept: what we want to talk about today is to use HTML5 WebSocket for transmission and then Canvas graphics for real-time video transmission. First, let's talk about the latest versions of Chrome and Safari platforms, which are absolutely supported by Firefox. yes (it seems that websocket must be used) congratulations, IE10 also supports the most amazing Windows Phone8 browser. You can also refer to the Web browser (source from) first, write a simple Demo so that the client can communicate directly through the WebSocket object in Javascript in a browser that supports WebSocket. WebSocket objects use the onopen, onmessage, and onclose events to Implement Asynchronous response to socket messages.

Please create a static page without the need to create ruant = "server"; otherwise, the system will automatically reload

 

<! DOCTYPE html>

<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script type = "text/javascript">
Var wsServer = 'ws: // localhost: 9999/webSocket. ashx'; // Based on. NET4.5 server address
// Var wsServer = 'ws: // localhost: 100'; // address of the. NET Server

Var websocket = new WebSocket (wsServer); // create a WebSocket object
// Websocket. send ("hello"); // send a message to the server
// Alert (websocket. readyState); // view the current status of websocket
Websocket. onopen = function (evt ){
// A connection has been established.
Alert ("established connections ");
};
Websocket. onclose = function (evt ){
// The connection has been closed
Alert ("Connection closed ");
};
Websocket. onmessage = function (evt ){
// Receives the Server Message and extracts it using evt. data.
Evt. stopPropagation ()
Evt. preventDefault ()
// Alert (evt. data );
WriteToScreen (evt. data );
// Websocket. close ();
};
Websocket. onerror = function (evt ){
// Exception
// Alert (evt. message );
WriteToScreen (evt. message );
};
Function sendMsg (){
If (websocket. readyState = websocket. OPEN ){
Msg = document. getElementById ("msg"). value;
Websocket. send (msg );
WriteToScreen ("sent successfully! ");
} Else {
WriteToScreen ("connection failed! ");
}
}

Function writeToScreen (message ){
Var pre = document. createElement ("p ");
Pre. style. wordWrap = "break-word ";
Pre. innerHTML + = message;
Output. appendChild (pre );
}
</Script>
</Head>
<Body>
<Div>
<Input type = "text" id = "msg" value = "beyond is number one! "/>
<Button onclick = "sendMsg ()"> send </button>
</Div>
<Div id = "output"> </div>
</Body>
</Html> readyState indicates that the connection has four states:

CONNECTING (0): indicates that no connection has been established;

OPEN (1): A connection has been established for communication;
CLOSING (2): closes the connection by CLOSING the handshake;
CLOSED (3): the connection is CLOSED or cannot be opened;

The url represents the network address of the WebSocket server. The protocol is generally "ws" or "wss (encrypted communication)". The send method is to send data to the server;

The close method is to close the connection;

The onopen connection is established, that is, the event triggered by the handshake;

Event triggered when onmessage receives a message from the server;

Event triggered by an onerror exception;

Onclose: The event triggered by closing the connection;

Let's talk about the. NET4.5-based ashx.

// Obtain the current WebSocket request
HttpContext. Current. AcceptWebSocketRequest (async (context) =>
{
WebSocket socket = context. WebSocket; // Socket
While (true)
{
ArraySegment <byte> buffer = new ArraySegment <byte> (new byte [1024]);
CancellationToken token;
WebSocketReceiveResult result =
Await socket. ReceiveAsync (buffer, token );
If (socket. State = WebSocketState. Open)
{
String userMessage = Encoding. UTF8.GetString (buffer. Array, 0,
Result. Count );
UserMessage = "You sent:" + userMessage + "at" +
DateTime. Now. ToLongTimeString ();
Buffer = new ArraySegment <byte> (Encoding. UTF8.GetBytes (userMessage ));
Await socket. SendAsync (buffer, WebSocketMessageType. Text,
True, CancellationToken. None );
}
Else {break ;}
}
});