node.js - 如何将外部socket.io客户端代码链接到HTML页面？-6ren

node.js - 如何将外部socket.io客户端代码链接到HTML页面？

转载作者：太空宇宙更新时间：2023-11-03 22:11:48

到目前为止，我还没有找到答案——我得到的最接近的就是这个主题
Using socket.io without client embedded in html

但这并没有真正解决问题。

我最近一直在学习 WebSockets，特别是 Node.js，许多教程都使用 socket.io 作为选择的 Node 模块。

但是，似乎所有在线资源都有示例代码，这些代码将所有客户端功能嵌入 <script></script> 中。 HTML 页面上的标签，而不是将其链接到外部 Javascript 文件。

我一直在关注一个演示使用 socket.io 的简单聊天应用程序的教程 - 示例代码仅包含两个文件(index.html 和 server.js)。 HTML 中的脚本标记内嵌入了一些客户端代码:

<script>
        var socket = io('http://localhost:5000');

        socket.on('message.sent', function (data) {
            $('#messages').prepend(`
                <div>
                    <hr />
                    <div><strong>${data.username}</strong></div>
                    <p>${data.message}</p>
                </div>
            `);
        });

        $(function () {
            $('#message-form').on('submit', function (e) {
                e.preventDefault();
                socket.emit('message.send', {
                    message: $('#message').val(),
                    username: $('#username').val()
                });
            });
        });
</script>

但我想弄清楚如何链接到外部文件。

我尝试将客户端代码放入外部文件(例如“client.js”)并将其链接到 HTML 页面:

<script src="client.js"></script>

但是，当我这样做时，控制台会显示 404 错误，告诉我它找不到 http://localhost:5000/client.js

这个应用程序很简单，但随着教程的继续，它只是不断地将大量客户端代码堆积到这些脚本标记中。如果可能的话，我宁愿学习如何从外部链接代码。

我已粘贴下面的两个文件，以防其中任何一个可能相关:

index.html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    </head>
    <body>
        <div class="container">
            <form id="message-form">
                <p>
                    <label>Username</label>
                    <input class="form-control" id="username" />
                </p>
                <p>
                    <label>Message</label>
                    <textarea class="form-control" id="message"></textarea>
                </p>
                <button class="btn btn-primary" type="submit">Send</button>
            </form>
            <div id="messages"></div>
        </div>


        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <script>
        var socket = io('http://localhost:5000');

        // Update the users count
        socket.on('message.sent', function (data) {
            $('#messages').prepend(`
                <div>
                    <hr />
                    <div><strong>${data.username}</strong></div>
                    <p>${data.message}</p>
                </div>
            `);
        });

        $(function () {
            $('#message-form').on('submit', function (e) {
                e.preventDefault();
                socket.emit('message.send', {
                    message: $('#message').val(),
                    username: $('#username').val()
                });
            });
        });
        </script>


    </body>
</html>

server.js，如果相关的话:

var express = require('express'),
    app = express(),
    http = require('http'),
    socketIO = require('socket.io'),
    server, io;

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

server = http.Server(app);
server.listen(5000);

io = socketIO(server);

io.on('connection', function (socket) {
    socket.on('message.send', function (data) {
        io.emit('message.sent', data);
    });
});