与 nodejs express 的 WebSocket 连接答案

【问题标题】：WebSocket connection with nodejs express与 nodejs express 的 WebSocket 连接
【发布时间】：2020-04-16 23:07:28
【问题描述】：

我正在尝试使用 express 连接到 websocket，但它没有连接。我正在尝试使用 WebSocket 向 HTML 页面发送消息。

我的服务器端

  var expressWs = require('express-ws')(app);


  app.ws('/echo', function (ws, req) {
      ws.on('message', function (msg) {
        ws.send(msg);
      });
   });

HTML 代码

<script language="javascript" type="text/javascript">
      var form;
      var websocket;
      function init() {
         form = document.getElementById("isyeribul");
         websocket = new WebSocket("ws://localhost:8080/");
         websocket.onopen = function(evt) {
             console.log("CONNECTED");
         };
         websocket.onmessage = function(event) {
             form.style.display = "none";

         };
      }
        window.addEventListener("load", init, false);

      function sendfunc(){
        var text=document.getElementById("txt1").value;
        websocket.send(text);
        console.log(text+ "  sent");
      }



    </script>

控制台输出

isyeriara:30 WebSocket is already in CLOSING or CLOSED state.

【问题讨论】：

帮助文章：pubnub.com/blog/nodejs-websocket-programming-examples

标签： javascript html node.js express websocket

【解决方案1】：

来自此文档：https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/readyState

websocket.readyState 有 4 个状态：

0 CONNECTING 套接字已创建。连接尚未打开。
1 OPEN 连接已打开并准备好进行通信。
2 CLOSING 正在关闭连接。
3 CLOSED 连接已关闭或无法打开。

来自此文档：https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications

由于建立连接是异步的并且容易失败，因此无法保证在创建 WebSocket 对象后立即调用 send() 方法会成功。我们至少可以确定，只有在建立连接后才会尝试发送数据，方法是定义一个 onopen 事件处理程序来完成这项工作

这是一个最小的工作示例：

app.js:

const express = require('express');
const path = require('path');
const app = express();
require('express-ws')(app);

app.get('/', (req, res) => {
  res.sendFile(path.resolve(__dirname, './public/index.html'));
});

app.ws('/echo', function(ws, req) {
  ws.on('message', function(msg) {
    ws.send(msg);
  });
});

const port = 8080;
app.listen(port, () => {
  console.info(`HTTP server is listening on http://localhost:${port}`);
});

./public/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <form id="isyeribul"><input id="txt1" value="websocket example" type="search" placeholder="search" /></form>
    </main>
    <script>
      var form;
      var websocket;
      function init() {
        form = document.getElementById('isyeribul');
        websocket = new WebSocket('ws://localhost:8080/echo');
        websocket.onopen = function(evt) {
          console.log('CONNECTED');
          sendfunc();
        };
        websocket.onmessage = function(event) {
          form.style.display = 'none';
        };
      }
      window.addEventListener('load', init, false);

      function sendfunc() {
        var text = document.getElementById('txt1').value;
        websocket.send(text);
        console.log(text + '  sent');
      }
    </script>
  </body>
</html>

浏览器console的结果：

websocket example  sent

【讨论】：