与 nodejs express 的 WebSocket 连接

Question

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

我的服务器端

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


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

代码

<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.

Answer 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

与 nodejs express 的 WebSocket 连接

问题描述

1 个解决方案

解决方案1
0 2019-12-27 07:19:28

与 nodejs express 的 WebSocket 连接

问题描述

1 个解决方案

解决方案1 0 2019-12-27 07:19:28

解决方案1
0 2019-12-27 07:19:28