Question

到目前为止我还没有找到答案的运气 - 我得到的最接近的是这个话题 Using socket.io without client embedded in html

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

我最近一直在学习WebSockets，尤其是node.js，许多教程使用socket.io作为首选的节点模块。

但是，似乎所有在线资源都有示例代码，它将所有客户端功能嵌入到HTML页面上的<script></script>标记内，而不是将其链接到外部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>

但我想知道如何链接到外部文件。

我尝试将客户端代码放入外部文件（例如＆＃34; client.js＆＃34;）并将其链接到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);
    });
});

Answer 1

控制台向我显示404错误，告诉我找不到

因为您的网络服务器不提供静态内容。

只需将此行添加到您的server.js：

在app.use(express.static('public'));行之前，创建一个名为'public'的新文件夹，并将client.js文件移动到此文件夹。

详细了解here

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

1 个答案: