无法建立套接字连接答案

【问题标题】：Unable to establish a socket connection无法建立套接字连接
【发布时间】：2021-05-10 00:51:28
【问题描述】：

我正在尝试关注 this tutorial 在 JavaScript 中在客户端和服务器之间设置一个简单的 WebSocket。作者写的那部分我自己看

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

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

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

而我的代码如下：

chat.js：

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

index.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），但还没有找到解决方案。希望这里有人可以提供帮助。

谢谢！

【问题讨论】：

标签： javascript html node.js sockets websocket

【解决方案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>

【讨论】：