如何使用 socket.io 创建一个单独的 client.js 文件？答案

【问题标题】：How can I create a separate client.js file with socket.io?如何使用 socket.io 创建一个单独的 client.js 文件？
【发布时间】：2020-04-20 03:20:07
【问题描述】：

如果我希望当前存在于 index.html 文件中的客户端脚本存在于单独的 client.js 文件中，聊天应用程序示例（在 https://socket.io/get-started/chat/ 中描述）应该如何看待？ 注意：在本示例教程中，我正在尝试让 a user connected 在刷新网页时出现，但这无法正常工作。

我尝试在 index.html 文件的 head 部分中包含 <script src="client.js"></script>，然后

const io = require('socket.io-client');

var socket = io();

在我的 client.js 文件中，但它不起作用。当我运行node server.js 时，聊天应用程序设计正确显示在网页上，我在终端中显示listening on *:3000 文本，但不是刷新时应该出现的a user connected 文本网页。

我的server.js、index.html和client.js文件都在目录的顶层，分别如下：

server.js

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html'); // Based on some research, I feel that the problem might
                                           // be here, where I'm sending just a file, not a directory?..
});

io.on('connection', (socket) => {
  console.log('a user connected');
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Chat Application</title>
        <style>
            * { margin: 0; padding: 0; box-sizing: border-box; }
            body { font: 13px Helvetica, Arial; }
            form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
            form input { border: 0; padding: 10px; width: 90%; margin-right: 0.5%; }
            form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
            #messages { list-style-type: none; margin: 0; padding: 0; }
            #messages li { padding: 5px 10px; }
            #messages li:nth-child(odd) { background: #eee; }
          </style>
          <script src="client.js"></script>
    </head>
    <body>
        <ul id="messages"></ul>
        <form action="">
          <input id="m" autocomplete="off" /><button>Send</button>
        </form>
    </body>
</html>

client.js

// I am also unsure if the following is correct...
const io = require('socket.io-client');

var socket = io();

【问题讨论】：

我想你忘记了这一步：socket.io/get-started/chat/#Integrating-Socket-IO 你还没有被包含在 socket.io.js
我对你指的是什么感到困惑。我如何包含 socket.io.js？
在 Integrating Socket.IO 部分，您将看到 2 个部分： 1. 与 Node.JS HTTP Server socket.io 集成（或安装在其上）的服务器。 2。加载在浏览器端 socket.io-client 上的客户端库。 这意味着您将需要用于客户端的 socket.io 库，因为客户端浏览器不会理解套接字 io 是什么？
因此您需要为客户端包含 socket.io-client ，该客户端将包含在 index.html 文件中。 <script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script> <script> var socket = io('http://localhost'); socket.on('connect', function(){}); socket.on('event', function(data){}); socket.on('disconnect', function(){}); </script>
您是在 webpacking/browserifying 还是任何其他替代方案，您的 client.js 代码。如果没有，则 require 将不起作用，您需要按照上面的注释执行操作，然后只需编写 var socket = io()。

标签： javascript node.js express socket.io client-server

【解决方案1】：

这是一个老问题，但仍然是 socket.io 示例代码的问题。我能够弄清楚。问题是文件系统在运行任何服务器（包括本地主机）时工作方式不同。

简而言之，要解决此问题，请在 index.js（或在 OP 的问题中称为 server.js）中替换：

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

与

app.use(express.static(__dirname));
app.get('/', (req, res) => {
   
});

（当然，如果需要，以后可以随时填写app.get 函数。

【讨论】：