Socket.io 客戶端未監聽事件

Question

我正在使用 socket.io 的官方代碼示例，並試圖了解它是如何工作的。

事件在服務器端觸發和接收，但客戶端未監聽該事件。

我在 node.js 端口 3000 上運行的服務器和

客戶端我在端口 5500 上運行 VSCode GoLive Extension

這是我的詳細代碼

Package.json

{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "socket.io": "^4.1.2"
  },
  "scripts": {
    "start": "DEBUG=* nodemon index.js"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

Index.html（由於 Stackoverflow 的限制，我無法粘貼整個頁面代碼這里只是沒有 css 的正文代碼）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>

<ul id="messages"></ul>
<div id="form">
  <input id="input" autocomplete="off" />
  <button id="btn_submit">Send</button>
</div>

<script>
  $(function () {
    var socket = io("http://localhost:3000");
    socket.on("connect", function () {
      console.log("client is connected", socket.connected);
      socket.emit("message", "Welcome To Chat");
    });
    var messages = document.getElementById("messages");
    var input = document.getElementById("input");

    $("#btn_submit").on("click", function () {
      if (input.value) {
        console.log(input.value);
        socket.emit("message", input.value, (response) => {
          console.log(response); // "got it"
        });
        input.value = "";
      }
    });
    console.log(socket);
    socket.on("message", function (msg) {
      console.log(msg);
      var item = document.createElement("li");
      item.textContent = msg;
      messages.appendChild(item);
      window.scrollTo(0, document.body.scrollHeight);
    });
  });
</script>

索引.js

const app = require('express')();
var cors = require('cors');
const http = require('http').Server(app);
const io = require('socket.io')(http, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});
const port = process.env.PORT || 3000;

app.use(cors())
const connections = [];

io.on('connection', (socket) => {
  connections.push(socket);
  console.log(" %s sockets is connected", connections.length);

  socket.on("disconnect", () => {
    connections.splice(connections.indexOf(socket), 1);
    console.log("Now %s sockets is connected", connections.length);
  });
});

http.listen(port, () => {
  console.log(`Socket.IO server running at http://localhost:${port}/`);
});

Answer 1

在您的index.js文件中，您已經初始化了套接字，但我看不到任何事件接收或發出方法。 您應該在服務器端使用socket.emit()將數據發送到客戶端，並socket.on()從客戶端接收數據。 您應該從index.js文件發送 socket.emit("message", "Message") 。 你可以 在這里找到更好的解釋。