socket.io 没有连接

问题描述 投票:0回答:1

socket.io 的连接由于某种原因无法工作,并且连接日志没有出现在控制台日志上。我尝试按照 socket.io 的文档一步步操作,但仍然没有任何效果...

这里是代码文件,主要可以看index.js文件中socket代码片段的

"connection"
路线,看看我的意思。 index.html 文件包含负责接收来自 form 的输入的标签。

index.js:

import express from 'express';
import { createServer } from 'node:http';
import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';
import { Server } from 'socket.io';

const app = express();
const port = 3000;
const server = createServer(app);
const io = new Server(server);

const __dirname = dirname(fileURLToPath(import.meta.url));

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



io.on("connection", (socket) => {
    console.log("A user connected");
    socket.on("chat message", (msg) => {
        console.log("Message: " + msg);
    });
    socket.on("disconnect", () => {
        console.log("User disconnected");
    });
});




app.listen(port, () => {
    console.log(`Listening on port ${port}`)
});

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Chat App</title>
    <style>
      body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
      #input:focus { outline: none; }
      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }

      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages > li { padding: 0.5rem 1rem; }
      #messages > li:nth-child(odd) { background: #efefef; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>



    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
    <script>  
       const socket = io();

       const form = document.getElementById("form");
       const input = document.getElementById("input");

       form.addEventListener((event) => {
        event.preventDefault();
        if(input.value){
          socket.emit("emit message", input.value);
          input.value = "";
        }
       });
    </script>
  </body>
</html>

package.json:

{
  "name": "chat-app",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "body-parser": "^1.20.2",
    "ejs": "^3.1.9",
    "express": "^4.19.2",
    "socket.io": "^4.7.5"
  }
}
node.js express socket.io
1个回答
0
投票

您正在创建两个独立的Web服务器实例,将express绑定到其中一个,将socket.io绑定到另一个,并且仅启动express服务器。因此,socket.io 服务器永远不会启动,实际上应该使用与 express 相同的服务器(因为它位于同一端口)。

您可以通过更改以下内容来修复它:

app.listen(port, () => {
    console.log(`Listening on port ${port}`)
});

对此:

server.listen(port, () => {
    console.log(`Listening on port ${port}`)
});
© www.soinside.com 2019 - 2024. All rights reserved.