Shulou(Shulou.com)05/31 Report--

This article will explain in detail how to obtain real-time messages in the online chat system in big data. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Preface

Traditional web browser applications use the client active request mode, and the server returns a message only when the browser request is received. This mode can no longer meet the increasingly diverse needs of web applications, such as:

Online chat system: need to get chat messages in real time.

Real-time monitoring system: the status of monitoring objects needs to be obtained in real time. Such as instrument readings, alarm messages, etc.

With the evolution of html technology, a variety of server push technologies have been developed for servers to push messages to browser clients.

Ajax polling

Ajax is used to regularly send a request to the server to check whether there is a message update. The web page periodically sends a request to the server. If the server has a message push, a message is returned, otherwise an empty message is returned, as shown in the following figure:

This polling method needs to send a large number of invalid requests, which greatly consumes server resources, and the real-time performance of push messages is low.

Ajax long polling

Ajax long polling improves the previous Ajax polling method. After receiving the request, the server no longer returns immediately, but waits for the message to be pushed. After receiving the message returned by the server, the web page immediately initiates a new request and waits for the next push message.

The web page calls the EventSource API to send a request to the server:

Var source = new EventSource ('http://localhost:8080');

Source.addEventListener ('message', function (e) {console.log (e.data);}, false)

The Content-Type header returned by the server must be text/event-stream, and the request is not closed after a message is returned, and subsequent messages are still returned using the same request. The browser automatically recognizes each message with a newline character.

Response head

Content-Type: text/event-stream

X-Accel-Buffering: no

Response body

Event: userlogin

Data: {"username": "John123"}

Event: message

Data: 123

If the message returned by the server is returned to the client through a proxy server such as nginx, it may be affected by the nginx caching mechanism. In some cases, nginx will cache the server return body and wait for all returns to be accepted before returning to the client. In the case of server-send event, the client will not be able to receive the message in time. You need to add X-Accel-Buffering: no in the fallback to prevent nginx from caching.

Using Huawei API gateway to provide

Of type Server-Send Event

API service establishing back-end service

Log in to Huawei Cloud https://console.huaweicloud.com/ to create an elastic CVM

Create API

The API gateway provides the ability to access the CVM from the private network. You do not need to apply for a public network elastic IP to open the API through the VPC tunnel.

Log in to Huawei Cloud https://console.huaweicloud.com/apig/ and first create a VPC tunnel with port 8080.

Create API. Select APP for authentication type.

"request Path to" enter "/ stream", "enable Cross-domain" option, and select enable.

Create the API of the OPTIONS method

The API of the OPTIONS method is provided to the browser for pre-request use to send cross-domain requests. You also choose to enable cross-domain (CORS) and configure the backend as Mock.

When you have finished creating the API, publish the API to the RELEASE environment.

Create a web page and visit API

1. To access API with APP authentication, you need to generate a signature through key and secret of APP before it can be verified. Generate the signature using the javascript SDK downloaded using the link below

Https://console.huaweicloud.com/apig/?agencyId=c65a0db86e514fe298cdc57c6273411a®ion=cn-south-1&locale=zh-cn#/apig/manager/useapi/sdk

two。 Since IE browsers do not support Server Sent Event, you need to download a browser-compatible Server Sent Event implementation from https://github.com/Yaffle/EventSource/.

Search and delete the following four lines of code:

If (url.slice (0,5)! = "data:" & &

Url.slice (0,5)! = "blob:") {

RequestURL = url + (url.indexOf ("?", 0) = =-1? "?": "&") + "lastEventId=" + encodeURIComponent (lastEventId)

}

3. Create an index.html as follows:

SSE APP test

SSE APP test

09

Var req = new signer.HttpRequest ()

Req.method = "GET" >

Req.host = "d3da6a917a844df3bd02896496b1b75b.apigw.cn-south-1.huaweicloud.com"

Req.uri = "/ stream"

Var sig = new signer.Signer ()

Sig.AppKey = ""

Sig.AppSecret = ""

Var opts = sig.Sign (req)

Var source = new EventSourcePolyfill ("http://d3da6a917a844df3bd02896496b1b75b.apigw.cn-south-1.huaweicloud.com" + req.uri, {

Headers: opts.headers

});

Source.onmessage = function (event) {

Document.getElementById ("a") [xss_clean] = event.data

}

Fill in the AppKey and AppSecret of the APP you just created in the location specified above. Open this page locally in a browser and you can see that the time displayed on the page is refreshed every second.

Big data on how to achieve real-time message acquisition in the online chat system is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.