html5的服务器如何推送Server-sent Events和 websocket

发布时间:2021-10-12 15:48:52 作者:柒染
来源:亿速云 阅读:165

这期内容当中小编将会给大家带来有关html5的服务器如何推送Server-sent Events和 websocket,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

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>

EventSource 对象

在上面的例子中,我们使用 onmessage 事件来获取消息。不过还可以使用其他事件:

事件描述
onopen当通往服务器的连接被打开
onmessage当接收到消息
onerror当发生错误

nodejs 服务端示例:

服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为"text/event-stream"。

服务器返回字段:

两种情况会导致浏览器重新发起连接
一种是时间间隔到期,二是由于网络错误等原因,导致连接出错。

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

返回目录

运行原理

客户端通知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>

socket服务端 nodejs

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);
    });
});

总结

返回目录

浏览器兼容性

服务器负载

客户端负载

时间线

实现方式复杂度

上述就是小编为大家分享的html5的服务器如何推送Server-sent Events和 websocket了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. Spring Boot 二三事:WEB 应用消息推送的那点事
  2. html5中服务器推送事件的示例分析

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5

上一篇:网页制作常用英文字体有哪些

下一篇:使用if语句的方法教程

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》