如何连接外部插座.io客户端代码到HTML页面

到目前为止，我还没有找到任何答案——我得到的最接近的答案是这个主题
使用套接字。没有客户端的IO嵌入在html

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

我最近一直在学习WebSockets，特别是node.js，很多教程都使用socket。IO作为节点模块的选择。

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

我一直在遵循一个教程，演示一个简单的聊天应用程序使用套接字。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);
    });
});

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

因为你的web服务器不提供静态内容。

把这一行添加到你的server.js:

app.use(express.static('public'));

在app.get...行之前，创建一个名为"public"的新文件夹，并将client.js文件移动到该文件夹。

点击这里了解更多信息

相关内容

最新更新

热门标签：