Node.js（六）：HTTP长连接 - comet、SSE、WebSocket

comet: 基于 HTTP 长连接的“服务器推”技术

• 服务端

  const http = require('http');
  
  http.createServer((req, res) => {
        
        
      res.writeHead(200, {
        
        
          "Access-Control-Allow-Origin": "*",
          "Content-Type": "text/event-stream",
          // "Cache-Control": "no-cache",
          // "Connection": "keep-alive",
      });
  
      setInterval(_ => {
        
        
          let data = {
        
        
              name: 'Lee',
              time: Date.now()
          }
          res.write(JSON.stringify(data));
      }, 1000);
  
  }).listen(8888);
  

• 客户端

  let xhr = new XMLHttpRequest();
  xhr.open('get', 'http://127.0.0.1:8888', true)
  xhr.onreadystatechange = () => {
        
        
      if (xhr.readyState === 3) {
        
        
          console.log(xhr.responseText);
          /**
           * 第一次结果   --->    {"name":"Lee","time":1657178140901}
           * 第二次结果   --->    {"name":"Lee","time":1657178140901}{"name":"Lee","time":1657178141901}
           * 第三次结果   --->    {"name":"Lee","time":1657178140901}{"name":"Lee","time":1657178141901}{"name":"Lee","time":1657178142900}
           * ······
           */ 
      }
  }
  xhr.send(null)
  

SSE: 服务器发送事件,使用长连接进行通信

• 服务端

  const http = require('http');
  
  http.createServer((req, res) => {
        
        
      res.writeHead(200, {
        
        
          "Access-Control-Allow-Origin": "*",
          "Content-Type": "text/event-stream",
          "Cache-Control": "no-cache",
          "Connection": "keep-alive",
      });
  
      setInterval(_ => {
        
        
          let data = {
        
        
              name: 'Lee',
              time: Date.now()
          }
          // data: ······ \n\n 必须存在
          res.write(`data:${
          
          JSON.stringify(data)}\n\n`);
      }, 1000);
  
  }).listen(8888);
  

• 客户端

  const es = new EventSource('http://127.0.0.1:8888');
  es.onmessage = function (e) {
        
        
      console.log(JSON.parse(e.data));
  }
  es.onopen = function () {
        
        
      console.log("链接已建立", this.readyState)
  }
  es.onmessage = function (e) {
        
        
      console.log("data", JSON.parse(e.data))
  }
  es.onerror = function() {
        
        
      console.log("error")
  }
  

WebSocket: 即时通讯

• 服务端（npm install websocket）

  var WebSocketServer = require('websocket').server;
  var http = require('http');
  var server = http.createServer();
  
  var wsServer = new WebSocketServer({
        
        
      httpServer: server.listen(8888, _ => console.log('ws://127.0.0.1:8888')),
      autoAcceptConnections: true
  })
  
  let connectionList = []; // 存储多客户端
  
  // 监听连接
  wsServer.on('connect', (connection) => {
        
        
  
      // console.log(connection);
  
      connectionList.push(connection);
      
      connection.send('【来自服务器】 连接成功');
      connection.send(`【来自服务器】 你好，Lee!!!`);
  
      connection.on('error', (err) => {
        
        
          console.log(err);
      });
      
      connection.on('close', (code, desc) =>  {
        
        
          console.log('断开连接', code, desc);
      });
      
      connection.on('message', (data)  => {
        
        
          // console.log(data);
          if (data.type === 'utf8') {
        
        
              for (let i = 0; i < connectionList.length; i++) {
        
        
                  connectionList[i].send(`【来自服务器】 ${
          
          data.utf8Data}`);
              }
          }
      });
  
  })
  

• 客户端

  <button onclick="connect()">连接</button>
  <button onclick="quit()">断开</button>
  <input id="msg" type="text">
  <button onclick="send()">发送</button>
  

  let socket = null;
  
  function connect() {
        
        
  
      // 连接服务器
      socket = new WebSocket('ws://127.0.0.1:8888');
  
      // 用于指定连接成功后的回调函数
      socket.onopen = (event) => {
        
        
          console.log("连接成功", event);
      };
  
      // 用于指定当从服务器接受到信息时的回调函数
      socket.onmessage = (event) => {
        
        
          console.log(event.data);
      };
  
      // 用于指定连接失败后的回调函数
      socket.onerror = (event) => {
        
        
          console.error("连接报错", event);
      };
  
      // 用于指定连接关闭后的回调函数
      socket.onclose = (event) => {
        
        
          console.log("连接关闭", event);
      };
  
  }
  
  /**
   * 向服务器发送消息
   */
  function send() {
        
        
      let {
        
         value: msg } = document.getElementById('msg');
      console.log(`【来自客户端】 ${
          
          msg}`);
      socket && socket.send(msg);
  }
  
  /**
   * 断开连接
   */
      function quit() {
        
        
      socket && socket.close();
  }