Talk about the html5 server push event

Server-section event is a unidirectional communication that sends events & data from the WebSocket protocol to the client. At present, all mainstream browsers support server sending events, of course, except for the Internet Explorer. 2333 ...

The WebSocket protocol is another server client communication protocol after the HTTP protocol. Unlike the HTTP simple client request server responding to the one -way communication mode, it supports the two -way communication of the server client.

Server-Seent Events (hereinafter referred to as SSE) as the server => Client communication method. The inevitable client must have the corresponding service address and response method, and the server must have the corresponding data sending method; not much nonsense, the code!

H5 page needs to be added with the following JS code:

 <Script> ifof (Every)! == Undefined) {// Push the service interface address VAR EVENTSOURCE = New EventSource (http: // localhost: 2242/Webservice/ServerSENT/SENTNNTN ews); // When connecting to the server Open eventsource.onopen = function () {console.log (connect to open ...);} // When the error occurs when the eventsource.onerror = function (e) {console.log (e); // News, this incident is the default event eventSource.onMessage = Function (Event) {console.log (onMessage ...); eventsource.close () // Close the SSE link}; tsource.addeventListener ('SENTMESSAGE ', function (event) {var data = eval ('+event.data+')'); // The data pushed by the server, EVAL replace the JSON object var Origin = Event.origin; // The domain name of the server URL Part, that is, protocols, domain names, and ports, indicating the source of the message. Business logic console.log (data);}, false);} Else {// Browser does not support the mainstream browsers of Server-Seent Events to support server sending events, except for the Internet Explorer. document.GetelementByid (result) .innerHtml = Sorry, Your Browser Does Not Support Server-Seent events ...;} </script>

What kind of data format should the server return? What kind of response should be given to the client? Let's first have a .NET sample

 /// <summary> /// Push messages /// </summary> /// <Return> </Return> [httpget] Public httpreSponseMessage Sentnews () {httpresponseMessage Response = Req UEST.CREATERESPONSE (httpstatusCode.ok); TRY {//Response.headers.adds.adds.Add_RCESS-CONTROL-ALLOW-Origin, *); // If you need to configure the string data_str = push to the client data; // Of course, it can be the json string format String EVEN =, Data =; if (! String.isnullwhiteSpace (data_str)) {EVEN = EVENT: SENTMESSAGE /n; data = data: + data_str + /n /n;} Retry: + 1000 + /n ; // Connect Re -connected time after opening (milliseconds), in fact, it can be understood as 2333 ... byte [] array = enCoding.utf8.getbytes (Even + Data + Retry); stream stream_result = new memoryStream (array); .Content = New StreamContent (stream_result); Response.Content.headers.ContentType = New MediaTypeheaderValue (Text/Event-Stream); CacheControl = New CacheControlHeaderValue (); response.headers.cacheControl.nocache = False;} Catch (Exception EX) {loghelper.writeweblog (ex);} Return Response;}

After reading the above code, I think you should have a approximate way. The method of response is still HTTPRESPONSE response, but there is always a little request:

The response header Content-Type should be set to Text/Event-Stream

The data format of the response should also be noticed that the Data:, Event: and Retry: these marks in the above code: These labels:

1.Event: It means the type of the event to declare the type of event. When receiving the data, the browser will produce a corresponding type of event.

2. Data: It means that the line contains data. It can appear many times at the beginning of Data. All these lines are data of the incident.

3.retry: It means that the line is used to declare the waiting time before the browser is connected after the connection is disconnected.

4.id: It means that the line used to declare the identifier (that is, the number of the data), which is not commonly used.

The above is the simple application of Server-Sent events. I will no longer show the achievement effect. If you are interested, you can operate the effect in person!