websocket使用实践代码指南

2023-09-14 247

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： websocket使用实践代码指南

文章目录

[websocket]([WebSocket - Web API 接口参考 | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket))

socket.io

[websocket](WebSocket - Web API 接口参考 | MDN (mozilla.org))

简单的来说，websocket是用来实现客户端和服务端进行双向连接的，连接之后，服务器可以给客户端主动发数据

前端

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      let websocket = null;
      window.onload = function () {
          // console.log(window)
          // 检测当前浏览器是否支持websocket
        if ("WebSocket" in window) {
          websocket = new WebSocket("ws://127.0.0.1:3000");
          // 监听ws连接
          websocket.onopen = (e) => {
            console.log("websocket is connection", e);
          };
          // 当ws收到消息之后触发回调
          websocket.onmessage = (e) => {
            console.log("message被触发", e);
          };
          // 监听ws关闭事件
          websocket.onclose = (e) => {
            console.log("websocket is closed\r\n", e);
          };
          // 监听ws错误事件
          websocket.onerror = (e) => {
            console.log("websocket is error\r\n", e);
          };
        }else{
            console.error("您的浏览器不支持websocket，请更换浏览器再试")
        }
      };
      function send() {
        console.info("我要发消息拉");
        websocket.send("hello");
      }
    </script>
  </head>
  <body>
    <button onClick="send()">发送消息</button>
  </body>
</html>

后端

使用node依赖node-websocket实现

"use strict";
const ws = require('nodejs-websocket')
const server = ws.createServer(function(con){
    console.log("new connection")
    // 收到前端发来的消息
    con.on('text', str=>{
        console.log('receiving \r\n', str)
        con.sendText('收到'+str+'!!!!')
        // console.log(server.connections)
    })
    setInterval(()=>{
        // 给前端发送消息
       send()
    },3000)
    // 监听所有的ws断开
    con.on('close', (code,reason)=>{
        console.log('connection is closed\r\n',code, reason)
    })
    con.on("error",e=>{
        console.log("error=\r\n",e)
    })
})
/**
 * 利用自定义的方法，
 * 对server的所有链接遍历广播消息，避免单一链接断开后，
 * 服务端继续发消息，造成4077持续错误
 */
function send(){
    // server.connections  是当前已连接的所有前端服务
    server.connections.forEach(connection=>{
        connection.sendText('hahah')
    })
}
// 启动服务
server.listen(3000,()=>{
    console.info('ws is running at:\r\n ws://127.0.0.1:3000')
})

socket.io

优点：可以利用http进行websocket通信，可以自定义事件分发

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/2.3.0/socket.io.dev.js"></script>
    <script>
        let socket = null
        window.onload = function(){
            socket = io('http://127.0.0.1:3000')
            // console.log(socket)
            socket.on('connect',()=>{
                console.log("成功链接服务端啦")
            })
            socket.on('disconnect',()=>{
                console.log("服务断开，尝试重新链接")
                socket.connect()
            })
            socket.on('msg',(data)=>{
                console.log('收到msg',data)
            })
        }
        function send(){
            if( !socket ) {
                console.error("还没有链接")
            }else{
                console.log("开始发数据")
                socket.emit('text','客户端发来数据')
            }
        }
        function hello(){
            if(!socket){
                console.error("还没有链接")
            }else{
                console.log("发送hello事件")
                socket.emit('hello','world')    // 触发hello事件带world参数
            }
        }
    </script>
</head>
<body>
    <button onclick='send()'>发送消息</button>
    <button onclick='hello()'>hello</button>
</body>
</html>

后端

const server = require('http').createServer();
const io = require('socket.io')(server, { cors: true });
io.on('connection', client => {
    console.log("有人链接了\r\n")
    // client.on 监听客户端emit事件
    client.on('event', data => {
        console.log('event\r\n', data)
    });
    client.on('disconnect', () => {
        console.log('client is disconnected\r\n')
    });
    client.on('hello',(data)=>{
        console.log("hello事件被触发，收到数据",data)
    })
    client.on('text',(data)=>{
        console.log('text事件被触发',data)
    })
    // setInterval(()=>{
    //     console.log('开始发信息')
    //     client.emit('msg',"我是服务端发来的数据")
    // }, 10000)
});
server.listen(3000);
/**
 * @todo
 * 因为使用小程序 socket.io 4监听不到所以回退到2
 */