这期内容当中小编将会给大家带来有关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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
