websocket使用实践代码指南

Posted 一腔诗意醉了酒

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了websocket使用实践代码指南相关的知识，希望对你有一定的参考价值。

文章目录

[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>

后端

"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
 */

以上是关于websocket使用实践代码指南的主要内容，如果未能解决你的问题，请参考以下文章

markdown 打字稿...编码说明，提示，作弊，指南，代码片段和教程文章

动手实践，即时通讯WebSocket的代码实现

推荐10个优秀GitHub仓库

推荐10个优秀GitHub仓库

Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre）(代码片段

机器学习实践：《Python机器学习实践指南》中文PDF+英文PDF+代码