学习WebSocket(附: WebSocket + koa例子)

0xE7A38A 发布于2019-08-23 15:18 / 435人阅读

摘要：优点参考维基与对比图客户端例子连接成功后调用当接收到服务器消息时调用连接关闭后调用服务端例子运行结果客户端服务端名词解释握手一般创建链接需要通过浏览器发出请求服务器做出回应这个过程称为握手参考链接协议分钟从入门到精通

原文地址
github项目地址

1. 什么是WebSocket?

WebSocket是一种在单个TCP连接上进行全双工通信的协议。  
使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。  
在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

2. 优点(参考维基)

WebSocket与HTTP对比图

客户端例子

    const ws = new WebSocket("ws://localhost:8888");

    ws.onopen = () => {
        console.log("WebSocket onopen");
    }

    ws.onmessage = e => {
        console.log("WebSocket onmessage");
        console.log("WebSocket message received：", e);
        console.log("WebSocket data received：", e.data);
    }

    ws.onclose = e => {
        console.log("WebSocket onclose");
    };

WebSocket.onopen：连接成功后调用

WebSocket.onmessage：当接收到服务器消息时调用

WebSocket.onclose：连接关闭后调用

服务端例子(koa)

  const Koa = require("koa");
  const WebSocket = require("ws");

  const app = new Koa();
  const ws = new WebSocket.Server({port: 8888});

  ws.on("connection", ws => {
      console.log("server connection");

      ws.on("message", msg => {
        console.log("server receive msg：", msg);
      });

      ws.send("Information from the server");
  });

  app.listen(3000);

运行结果

客户端

服务端

名词解释

握手：一般创建WebSocket链接, 需要通过浏览器发出请求,服务器做出回应, 这个过程称为“握手”

参考链接

WebSocket协议：5分钟从入门到精通
MDN

GPU云服务器云服务器 WebSocket rtc websocket cdn websocket websocket cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101841.html

服务端事件EventSource揭秘

摘要：不过永久帧的技术会导致主页面的加载条始终处于状态，体验很差。同时，规范允许服务端指定自定义事件，客户端侦听该事件即可。服务端推服务端推，指的是由服务器主动的向客户端发送消息（响应）。在应用层的HTTP协议实现中，请求-响应是一个round trip，它的起点来自客户端，因此在应用层之上无法实现简易的服务端推功能。当前解决服务端推送的方案有这几个：客户端长轮训 websocket...

sf190404 2019-08-21 17:22 评论0 收藏0
浅谈 WebSocket

摘要：接口用于接收服务器发送的事件。因此，是目前来说最佳的选择。最大特点就是，服务器可以主动向客户端推送消息，客户端也可以主动向服务器发送信息，是一种不受限的全双工通信。若是，则交给的回调函数处理，否则，还是走正常的回调的路子。使用 WebSocket 的理由传统的http协议有一个根本性的缺陷，那就是请求只能由客户端向服务器发起，服务器接收到请求后再进行响应，把数据返回给客户端。也就是...

Jensen 2019-08-23 13:53 评论0 收藏0