likes
comments
collection
share

websocket简单入门

作者站长头像
站长
· 阅读数 42

刚听部门分享，算是极其简单的了解 websocket~

简单说，websocket 就是一次性建立长连接，服务端和客户端可以相互发消息，特别适合实时性强的，常用于聊天、弹幕、消息等。

超简单效果展示

websocket简单入门

代码没几行，快速运行，2分钟复制粘贴，本地就玩起来了

1. 服务端启动 websocket

建个文件夹，yarn init -y;yarn add ws 建个server.js，放下面的代码，node ....server.js，跑起来

const ws = require('ws');
// 建立实例
const wss = new ws.Server({ port: 3000 });

// 监听连接
wss.on('open', function incoming(message) {
  console.log('🔗成功');
});
// 监听连接
wss.on('connection', function connection(ws) {
  // 监听消息
  ws.on('message', function incoming(message) {
    // 接受消息 - ！！！这就是接受客户端发过来的消息
    console.log('received: %s', message);
  });
  // 发送消息 - ！！！这就是向客户端发消息
  ws.send('服务端推送过来的');

  // 定时发送消息 - 模拟服务端主动推送消息
  setInterval(() => {
    ws.send('服务端推送过来的' + Math.random());
  }, 3000);
});

客户端启动 websocket，且建立连接

建个index.html，放入下面，右击在浏览器打开，打开控制台，搞定

<body>
  <script>
    // ws连接
    const ws = new WebSocket('ws://localhost:3000');
    let timer;
    // 监听连接成功
    ws.onopen = () => {
      // 发送消息 - 向服务端发送消息
      ws.send('客户端，监听连接成功');

      // 定时器，每隔3秒向服务端发送消息
      timer = setInterval(() => {
        ws.send('客户端推送的消息' + Math.random());
      }, 3000);
    };
    // 监听服务端发送的消息
    ws.onmessage = ({ data }) => {
      // 接受消息 - 接受服务端发送的消息
      console.log(data);
    };
    // 监听服务端发送的消息
    ws.onclose = () => {
      // 接受消息 - 接受服务端发送的消息
      console.log('连接关闭');
    };

    // 连接关闭
    setTimeout(() => {
      ws.close();
      clearInterval(timer);
    }, 9000);
  </script>
</body>

废话

就是简单的看看效果，哈哈哈

转载自:https://juejin.cn/post/7221830834431934523
评论
请登录