无法建立套接字连接

Question

我正在尝试按照本教程在 JavaScript 中的客户端和服务器之间设置一个简单的 WebSocket。 我由作者写的部分决定

此时，如果我们刷新我们的网页，我们可以看到“Made socket connection”和一个奇怪的字母和数字组合，代表我们终端中的 socket.id（一个唯一的套接字）。

但是，对我来说并非如此。 我收到“正在侦听端口 8080”消息，但没有收到套接字连接消息。 在 Chrome DevTools 中，我可以看到我的客户端 HTML 页面找不到chat.js脚本（见下图），但我没有必要的知识来进一步诊断：

这篇文章在软件工程方面已经相当老了，所以我想知道这些东西的工作方式是否已经改变了？ 我相信我所做的一切都或多或少与描述的完全一致，尽管我可能遗漏了一些东西。 我的文件夹结构如下：

我的代码如下：

聊天.js ：

const socket = io(window.location.origin);

索引.html ：

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta>
        <title>WebSocket Tutorial</title>  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.1/socket.io.js" integrity="sha512-oFOCo2/3DtjrJG4N27BjSLQWoiBv171sK6a+JiWjp/7agxC2nCUP358AqzxkBUb5jX8g6CYLPdSKQTbC0weCwA==" crossorigin="anonymous"></script>          
    </head>

    <body>
        <h1>Hello, World!</h1>
        <!--Load Socket.io in Client-->
        <script src=“/chat.js”></script>
    </body>
</html>

index.js ：

// Server Setup

const express = require('express');
const socket = require("socket.io");
const app = express();

// Serve public folder to client 

app.use(express.static("public"));

const server = app.listen(8080, function() {
    console.log("Listening on Port: 8080");
});

// Run the socket on the server

const io = socket(server);

// Specify what to do on connection 

io.on('connection', (socket) => {
    console.log("Socket connected: ", socket.id);
});

任何帮助将不胜感激，我已经用谷歌搜索了一下。 并在 SO 上查看了处于类似情况的人（例如this person ），但尚未找到解决方案。 希望这里有人可以提供帮助。

谢谢！

Answer 1

您没有正确加载 chat.js 脚本，因为您使用了错误的引号（ “” instead of "" ）。 这可能是因为您从教程中复制了标签。

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta>
  <title>WebSocket Tutorial</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.1/socket.io.js" integrity="sha512-oFOCo2/3DtjrJG4N27BjSLQWoiBv171sK6a+JiWjp/7agxC2nCUP358AqzxkBUb5jX8g6CYLPdSKQTbC0weCwA==" crossorigin="anonymous"></script>
</head>

<body>
  <h1>Hello, World!</h1>
  <!-- wrong quotes -->
  <script src=“/chat.js”></script>

  <!-- right quotes -->
  <script src="/chat.js"></script>

</body>

</html>

无法建立套接字连接

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-02-05 20:41:30

无法建立套接字连接

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-02-05 20:41:30

解决方案1
1 已采纳 2021-02-05 20:41:30