个人中心
gpt4 book ai didi

javascript - 无法建立套接字连接

转载 作者：行者123 更新时间：2023-12-03 12:01:57 24 4
gpt4 key购买 nike

我正在尝试遵循this tutorial在JavaScript中的客户端和服务器之间设置简单的WebSocket。我要负责作者写的那部分

At this point, if we refresh our webpage we can see the “Made socket connection“ and a weird combination of letters and numbers which represents socket.id (a unique socket) in our terminal.


但是，对我而言并非如此。我收到“正在监听端口8080”消息，但没有收到套接字连接消息。在Chrome DevTools中，我可以看到我的客户端HTML页面无法找到 chat.js脚本(请参见下图)，但是我还没有能够进一步诊断的必要知识:
Console
Network
从软件工程的角度讲，这篇文章已经很老了，所以我想知道这些东西的工作方式是否已经改变了？我相信我所做的每一件事或多或少都与所描述的完全一样，尽管我可能错过了一些东西。我的文件夹结构如下:
Folders
我的代码如下:
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)，但尚未找到解决方案。希望这里有人可以提供帮助。
谢谢!

最佳答案

您未正确加载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>

关于javascript - 无法建立套接字连接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66067349/

24 4 0
文章推荐： python - 在一个脚本中更新列表并从另一个脚本访问更新的列表
文章推荐： javascript - KineticJs - 将图像合并到另一个图像上
文章推荐： javascript - 在另一个排序函数中调用自定义 array.sort 函数
文章推荐： 套接字和文件描述符魔术
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com