webSocket使用

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

下面开始体验一下

前端代码

html

 <!--index.html-->
  <!DOCTYPE html>
  `<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        border: 1px solid red;
        overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="text" id="msg">
      <button id="send">发送</button>
    </div>
    <div id="box" class="box"></div>
    <script>
      
      var msgInput = document.querySelector('#msg');
      var sendBtn = document.querySelector('#send');
      var msgBox = document.querySelector('#box');

      var ws = new WebSocket('ws://localhost:3001/');

      ws.onopen = function() {
      // 这里用一个延时器模拟事件
        ws.send('我来了');
      }
      // 这里接受服务器端发过来的消息
      ws.onmessage = function(e) {
          console.log(e.data)
          var div = document.createElement('div');
          div.innerText = e.data;
          msgBox.appendChild(div);
      }
      ws.onclose = function() {
        console.log('关闭了')
      }
      ws.onerror = function() {
        console.log('发生了什么')
      }

      sendBtn.addEventListener('click', function(e) {
        var msg = msgInput.value; 
        ws.send(msg);
        msgInput.value = '';
      })
    </script>
  </body>
  </html>`

后端代码

使用nodejs作为后端服务

  // 安装nodejs-websocket包 
  npm i -S nodejs-websocket

  // server.js
  const http = require('http');
  const fs = require('fs');
  const ws = require('nodejs-websocket');

  const index = fs.readFileSync('./index.html');
  http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(index);
  })
  .listen(3000, ()=>{
    console.log('已监听3000')
  })

  function broadcast(server, msg) {
    server.connections.forEach(conn => {
        conn.sendText(msg)
    })
  }
  const socketServer = ws.createServer((socket) => {
    socket.on('text', (msg) => {
      broadcast(socketServer, msg)
    })
    socket.on('close', (code, reason) => {
      broadcast(socketServer, '有人走了')
    })
  })
  .listen(3001, () => {
    console.log('webSocket3001端口')
  })

// 开启服务
node server

打开两个浏览器窗口访问localhost:3000

下面开始体验一下 ​

预览:

下面开始体验一下