websocket使用实践代码指南

刺骨的言语ヽ痛彻心扉 2023-10-03 13:33 8阅读 0赞

#### 文章目录 ####

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

### 后端 ###

*  \[github地址\]([csDeng/websocket\_node: websocket学习 (github.com)][csDeng_websocket_node_ websocket_ _github.com])

[WebSocket - Web API _ _ MDN _mozilla.org]: https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
[node-websocket]: https://github.com/sitegui/nodejs-websocket
[csDeng_websocket_node_ websocket_ _github.com]: https://github.com/csDeng/websocket_node