无法建立套接字连接

debugcn 发表于 Dev

米克·麦卡锡（Mick McCarthy）

我正在尝试按照本教程在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);
});

任何帮助将非常感激！我已经在Google上搜索了一下，并研究了SO上处于类似情况的人员（例如this person），但尚未找到解决方案。希望这里有人可以提供帮助。

谢谢！

阿克斯泰克

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

<!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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。