溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關html5的服務器如何推送Server-sent Events和 websocket，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
Server-Sent Events
瀏覽器通過HTTP向服務器發送請求，服務器端拿出數據庫中的最新的信息，立即返回給客戶端，客戶端等待三秒后再次發出下一個請求。
JavaScript模塊打開EventSource，把接受者的id傳給服務端。 客戶端收到相應后，onMessage事件的處理器將被調用。瀏覽器將每3秒發送一個請求，除非將連接關閉（Close方法）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="example"></div>
<script>
if(typeof(EventSource)!=="undefined"){
var source = new EventSource('http://127.0.0.1:8844/stream');
var div = document.getElementById('example');
source.onopen = function (event) {
div.innerHTML += '<p>Connection open ...</p>';
};
source.onerror = function (event) {
div.innerHTML += '<p>Connection close.</p>';
};
source.addEventListener('connecttime', function (event) {
div.innerHTML += ('<p>Start time: ' + event.data + '</p>');
}, false);
source.onmessage = function (event) {
div.innerHTML += ('<p>Ping: ' + event.data + '</p>');
};
}else{
// 瀏覽器不支持 Server-Sent..
}
//source.close();//關閉連接方法
</script>
</body>
</html>在上面的例子中，我們使用 onmessage 事件來獲取消息。不過還可以使用其他事件：
| 事件 | 描述 |
|---|---|
| onopen | 當通往服務器的連接被打開 |
| onmessage | 當接收到消息 |
| onerror | 當發生錯誤 |
服務器端事件流的語法是非常簡單的。把 "Content-Type" 報頭設置為"text/event-stream"。
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
服務器返回字段：
data ：數據內容
event ：自定義事件
id ：數據編號
retry ：指定瀏覽器重新發起連接的時間間隔。retry: 10000\n
： ：冒號開頭的行，表示注釋
兩種情況會導致瀏覽器重新發起連接：
一種是時間間隔到期，二是由于網絡錯誤等原因，導致連接出錯。
var http = require("http");
http.createServer(function (req, res) {
var fileName = "." + req.url;
if (fileName === "./stream") {
res.writeHead(200, {
"Content-Type":"text/event-stream",
"Cache-Control":"no-cache",
"Connection":"keep-alive",
"Access-Control-Allow-Origin": '*',
});
res.write("retry: 10000\n");
res.write("event: connecttime\n");
res.write("data: " + (new Date()) + "\n\n");
res.write("data: " + (new Date()) + "\n\n");
interval = setInterval(function () {
res.write("data: " + (new Date()) + "\n\n");
}, 1000);
req.connection.addListener("close", function () {
clearInterval(interval);
}, false);
}
}).listen(8844, "127.0.0.1");返回目錄
客戶端通知WebSockets服務器一個事件，告訴他接收者id，服務器將立即通知消息，當任何新的未讀消息來的時候，服務器都將立即返回數據給客戶端。
<script type="text/javascript">
function WebSocketTest(){
if ("WebSocket" in window){
alert("您的瀏覽器支持 WebSocket!");
// 打開一個 web socket
var ws = new WebSocket("ws://localhost:8181");
ws.onopen = function(){
// Web Socket 已連接上，使用 send() 方法發送數據
ws.send("發送數據");
alert("數據發送中...");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("數據已接收...");
};
ws.onclose = function(){
// 關閉 websocket
alert("連接已關閉...");
};
}else{
// 瀏覽器不支持 WebSocket
alert("您的瀏覽器不支持 WebSocket!");
}
}
</script>var net = require("net");
server1 = net.createServer(function(client){
client.write('Hello World!\r\n');
});
server1.listen(9000);
//--------------------------------------------------
var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 8181 });
wss.on('connection', function (ws) {
console.log('client connected');
ws.on('message', function (message) {
console.log(message);
});
});返回目錄
Server-Sent Events 支持Chrome9+、Firefox6+、Opera11+、Safari5+
Server-Sent Events工作的方式有很多，除非Server-Sent Events不必在每一次響應發出后都關閉連接。
WebSockets，服務器只需要一個進程處理所有的請求，沒有循環，不必為每個客戶端都分配cpu和內存。
Server-Sent Events采用瀏覽器的內置的實現方式，只花費很少的一部分資源。
WebSockets跟Server-Sent Events一樣，采用瀏覽器的內置的實現方式，只花費很少的一部分資源。
Server-Sent Events默認延時3秒，但是可以調整。
WebSockets真正的實時
Server-Sent Events 甚至比Long-polling更簡單
WebSockets 需要一個WebSockets服務器處理事件，并開放一個端口
上述就是小編為大家分享的html5的服務器如何推送Server-sent Events和 websocket了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
