在React客戶端集成websocket-有解無憂

我正在嘗試連接在本地主機上運行的后端層，以下是源代碼：

const { createServer } = require("http");

const cors = require("cors");

const photos = require("./photos");

const app = require("express")();
const WebSocket = require("ws");

app.use(cors());

app.get("/", (req, res) => {
  res.status(200).json({});
});

app.get("/photos", (req, res) => {
  res.status(200).json({ photos });
});

const clients = new Set();

app.post("/photos/:id", (req, res) => {
  const photo = photos.find((p) => {
    return p.id === req.params.id;
  });

  photo.status= "PENDING";
  // Send back an approval
  const timeout = (3   Math.floor(Math.random() * 4)) * 1000;
  setTimeout(() => {
    photo.status = "APPROVED";
    clients.forEach((ws) => {
      ws.send(JSON.stringify({ event: "APPROVED", photo }));
    });
  }, timeout);
  res.status(200).json({ photo });
});

const port = process.env.PORT || 3001;
const server = createServer(app);
server.listen(port, () => {
  console.log(`Starting server on port ${port}`);
});

const wss = new WebSocket.Server({ path: "/ws", server });
wss.on("connection", (ws) => {
  clients.add(ws);
  console.log("WebSocket connection established");

  ws.on("close", () => {
    clients.delete(ws);
    console.log("WebSocket connection closed");
  });
});

在反應客戶端上，我們不能使用“ws”，所以我嘗試同時使用“websocket”包，但我無法連接到“http”，因為它不受支持。下面是源代碼：

import React from "react";
 import { w3cwebsocket as W3CWebSocket } from "websocket";

 const client = new W3CWebSocket('http://localhost:3001/ws');
// const client = new W3CWebSocket('ws://localhost:3001');

function App() {

  React.useEffect(
    () => {
      client.onopen = () => {
        console.log('WebSocket Client Connected');
      };
      client.onmessage = (message) => {
        console.log(message);
      };
    }, []
  )
     return null
}

需要客戶端級別的幫助才能連接到“http://localhost:3001/ws”以建立和偵聽連接。

uj5u.com熱心網友回復：

您正在連接到錯誤的網址。在服務器上的以下行中，您將路徑指定為/ws.

const wss = new WebSocket.Server({ path: "/ws", server });

所以你需要連接到指定的路徑。

const client = new W3CWebSocket('ws://localhost:3001/ws');

如果您path: "/ws"從中洗掉createServer，則 url ws://localhost:3001（注意，沒有/ws路徑..）也應該按預期作業。

這是一個在我的機器上作業的示例（沒有反應，它用于顯示套接字連接。）

客戶

var W3CWebSocket = require('websocket').w3cwebsocket;

const client = new W3CWebSocket('ws://localhost:3001/ws');

client.onopen = () => {
    console.log('WebSocket Client Connected');
};

client.onmessage = (message) => {
    console.log(message);
};
client.onerror = function() {
    console.log('Connection Error');
};

服務器

const { createServer } = require("http");

const cors = require("cors");

const app = require("express")();
const WebSocket = require("ws");

app.use(cors());

const port = process.env.PORT || 3001;
const server = createServer(app);

server.listen(port, () => {
  console.log(`Starting server on port ${port}`);
});
const wss = new WebSocket.Server({ path: "/ws", server });
wss.on("connection", (ws) => {
  console.log("WebSocket connection established");

  ws.on("close", () => {
    console.log("WebSocket connection closed");
  });
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/343616.html

標籤：javascript 节点.js 反应表达网络套接字

上一篇：Express正在將HTML物體應用于JSON正文

下一篇：將值傳遞給EJS