與 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