初识 WebSocket，建立简易聊天室

待我称王封你为后i 2022-12-16 06:13 195阅读 0赞

1.  新建 index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <h1>Echo Test</h1>
      <input type="text" id="sendTxt">
      <button id="sendBtn">发送</button>
      <div id="recv"></div>
      <script>
        var websocket = new WebSocket("ws://echo.websocket.org/");
        websocket.onopen = function() { 
          console.log('websocket open')
          document.getElementById("recv").innerHTML = "Conncted"
        }
        websocket.onclose = function() { 
          console.log('websoc')
        }
        websocket.onmessage = function(e) { 
          console.log(e.data)
          document.getElementById('recv').innerHTML = e.data
        }
        document.getElementById('sendBtn').onclick = function() { 
          var txt = document.getElementById('sendTxt').value
          websocket.send(txt)
        }
      </script>
    </body>
    </html>

当我们打开浏览器，在 input 里面输入字符，这时 network 就会发出一个 webSocket 请求  
这就是最基本的 webSocket 请求，我们请求的地址就是 ws://echo.websocket.org/，这个地址会将我们发送的信息原封不动的发送回我们

接下来我们使用 node 来搭建一个 webSocket 的后台

mkdir demo
    cd demo
    npm init -y
    npm install nodejs-websocket

新建一个 webServer.js

var ws = require("nodejs-websocket")
    
    var PORT = 3000
    
    var server = ws.createServer(function (conn) { 
      console.log("New connection")
      conn.on("text", function (str) { 
        console.log("Received "+str)
        conn.sendText(str)
      })
      conn.on("close", function (code, reason) { 
        console.log("Connection closed")
      })
      conn.on('error', function(err) { 
        console.log('handler')
        console.log(err)
      })
    }).listen(PORT)
    
    console.log(`webSocket server listening on port: ${ PORT}`)

运行 node webSocket.js

将刚刚的 index.html 拷贝一份到 demo 文件夹中，修改连接地址

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <h1>Echo Test</h1>
      <input type="text" id="sendTxt">
      <button id="sendBtn">发送</button>
      <div id="recv"></div>
      <script>
        var websocket = new WebSocket("ws://localhost:3000/");
        websocket.onopen = function() { 
          console.log('websocket open')
          document.getElementById("recv").innerHTML = "Conncted"
        }
        websocket.onclose = function() { 
          console.log('websoc')
        }
        websocket.onmessage = function(e) { 
          console.log(e.data)
          document.getElementById('recv').innerHTML = e.data
        }
        document.getElementById('sendBtn').onclick = function() { 
          var txt = document.getElementById('sendTxt').value
          websocket.send(txt)
        }
      </script>
    </body>
    </html>

在浏览器中运行，我们会发现跟刚刚的效果一模一样

聊天室就是很多人需要连接，很显然我们现在的代码无法满足我们的需求。我们进一步优化代码

// 记录聊天人数
    var clinetCount = 0
    
    var server = ws.createServer(function (conn) { 
      console.log("New connection")
      clinetCount++
      conn.nickname = 'user' + clinetCount
      // 广播一次
      broadcast(conn.nickname + 'comes in')
      conn.on("text", function (str) { 
        console.log("Received "+str)
        conn.sendText(str)
        broadcast(str)
      })
      conn.on("close", function (code, reason) { 
        console.log("Connection closed")
        // 离开的时候再广播一次
        broadcast(conn.nickname + 'left')
      })
    }).listen(PORT)
    
    // 广播事件
    function broadcast(str) { 
        // 每一个连接事件
      server.connections.forEach(function (connection) { 
        connection.sendText(str)
      })
    }

<body>
      <h1>Chat Room</h1>
      <input type="text" id="sendTxt">
      <button id="sendBtn">发送</button>
      <script>
        var websocket = new WebSocket("ws://localhost:3000/");
        function showMessage(str) { 
          var div = document.createElement('div')
          div.innerHTML = str;
          document.body.appendChild(div)
        }
        websocket.onopen = function() { 
          console.log('websocket open')
          document.getElementById("sendBtn").onclick = function() { 
            var txt = document.getElementById('sendTxt').value
            if (txt) { 
              websocket.send(txt)
            }
          }
        }
        websocket.onclose = function() { 
          console.log('websoc')
        }
        websocket.onmessage = function(e) { 
          console.log(e.data)
          showMessage(e.data)
        }
      </script>
    </body>

这样每开一个窗口，我们就可以显示一个人的连接  
但是信息都混合到了一起，所以我们需要辨识这个是连接，还是发送消息，还是离开

var server = ws.createServer(function (conn) { 
      console.log("New connection")
      clinetCount++
      conn.nickname = 'user' + clinetCount
      var mes = { }
      mes.type = 'enter'
      mes.data = conn.nickname + 'comes in'
      broadcast(JSON.stringify(mes))
      conn.on("text", function (str) { 
        console.log("Received " + str)
        var mes = { }
        mes.type = 'message'
        mes.data = conn.nickname + ' says: ' + str
        broadcast(JSON.stringify(mes))
      })
      conn.on("close", function (code, reason) { 
        console.log("Connection closed")
        var mes = { }
        mes.type = 'leave'
        mes.data = conn.nickname + 'left'
        broadcast(JSON.stringify(mes))
      })
      conn.on('error', function (err) { 
        console.log('handler')
        console.log(err)
      })
    }).listen(PORT)

我们给信息使用 type 进行 分类，便于我们辨识

在客户端，我们就可以通过 type 的类型，使用颜色来进行消息的区分

不过我们现在的代码还存在很多冗余的代码，我们使用 socket.io 进行优化

安装

npm install socket.io

新建一个 demo.js

var app = require('http').createServer()
    var io = require('socket.io')(app)
    
    app.listen(3000)
    
    io.on('connection', function(socket) { 
      socket.emit('news', {  hello: 'world' })
      socket.on('my other event', function(data) { 
        console.log(data)
      })
    })

新建一个 demo.html  
（socket.io-2.3.0.dev.js 下载地址 https://cdn.socket.io/socket.io-2.3.0.dev.js）

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>websocket</title>
      <script src="./socket.io-2.3.0.dev.js"></script>
    </head>
    <body>
      <script>
        var socket = io('ws://localhost:3000')
        socket.on('news', function(data) { 
          console.log(data)
          socket.emit('my other event', {  my: 'data' })
        });
      </script>
    </body>
    </html>

重新运行，浏览器的控制台和后端的控制台都输出了相对应的内容

我们在刚刚的写的聊天室里面运用这个 socket.io

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <script src="./socket.io-2.3.0.dev.js"></script>
    </head>
    
    <body>
      <h1>Chat Room</h1>
      <input type="text" id="sendTxt">
      <button id="sendBtn">发送</button>
      <script>
        var socket = io("ws://localhost:3000/");
        function showMessage(str, type) { 
          var div = document.createElement('div')
          div.innerHTML = str;
          if (type === 'enter') { 
            div.style.color = 'blue'
          } else if (type === 'leave') { 
            div.style.color = 'red'
          }
          document.body.appendChild(div)
        }
        document.getElementById("sendBtn").onclick = function () { 
          var txt = document.getElementById('sendTxt').value
          if (txt) { 
            socket.emit('message', txt)
          }
        }
        socket.on('enter', function(data) { 
          showMessage(data, 'enter')
        })
        socket.on('message', function(data) { 
          showMessage(data, 'message')
        })
        socket.on('disconnect', function(data) { 
          showMessage(data, 'disconnect')
        });
      </script>
    </body>
    
    </html>

var app = require('http').createServer()
    var io = require('socket.io')(app)
    
    var PORT = 3000
    
    var clinetCount = 0
    
    app.listen(PORT)
    
    io.on('connection', function(socket) { 
      clinetCount++
      socket.nickname = 'user' + clinetCount
      io.emit('enter', socket.nickname + 'comes in')
    
      socket.on('message', function(str) { 
        io.emit('message', socket.nickname + ' says: ' + str)
      })
    
      socket.on('disconnect', function() { 
        io.emit('leave', socket.nickname + 'left')
      })
    })
    
    console.log(`webSocket server listening on port: ${ PORT}`)

是不是精简了很多呢，这样我们入门就完成了。

笔者跟着慕课网的免费学习视频，跟着一起做了一个 基于 webSocket 和 原生 JS 的俄罗斯方块。感兴趣的小伙伴可以下载下来看一下。项目地址奉上

#### [https://gitee.com/suiboyu/tetris][https_gitee.com_suiboyu_tetris] ####

![在这里插入图片描述][539498eac94400024747d2eddcf69112.png_pic_center]  
![在这里插入图片描述][39b9dfff9f712c52930c421be67c9b67.png_pic_center]

[https_gitee.com_suiboyu_tetris]: https://gitee.com/suiboyu/tetris
[539498eac94400024747d2eddcf69112.png_pic_center]: /images/20221123/48d18b986a114c5ba00cb1903785e7c1.png
[39b9dfff9f712c52930c421be67c9b67.png_pic_center]: /images/20221123/f01d777680314e2aabb603afdcbe30d0.png