免费网页聊天室（网页聊天室有哪些）

投稿用户 • 2022年5月21日 01:22:05 • 资讯动态 • 阅读 39

添加 jQuery、SocketIO 和 index.js

在开始编写前端 Javascript 代码之前，我们要做的第一件事是确保我们需要的文件和依赖项将由 Node.js 服务器交付。让我们首先将jQuery和添加到由我们项目中所有其他翡翠文件扩展的文件中。Socket.IOlayout.jade

将单个链接替换为指向bootstrap.min.js我们需要的所有其他文件的链接。

script(type='text/javascript'
src='http://ajax.aspnetCDN.com/ajax/jQuery/jquery-2.1.1.min.js')
script(type='text/javascript' src='/js/bootstrap.min.js')
script(type='text/javascript' src='/socket.io/socket.io.js')

请注意，第一行链接到托管在Microsoft Ajax Content Delivery Network上的 jQuery 。此 CDN 托管流行的第三方 JavaScript 库，例如 jQuery，并使您能够轻松地将它们添加到您的 Web 应用程序中。使用 CDN 可以显着提高 Ajax 应用程序的性能。CDN 的内容缓存在世界各地的服务器上。CDN 支持 SSL (HTTPS)，以防您需要使用安全套接字层提供网页。

现在我将在最后添加一行来创建一个新块。

block body_end

我这样做是为了让任何扩展的 Jade 文件也layout.jade可以在正文标签的末尾添加脚本标签。

现在我们想使用这个新块来添加index.js我们将在public/js文件夹中创建的文件的链接，确保创建文件。

block body_end
    script(type='text/javascript' src='/js/index.js')

确保块以零缩进开始，以遵循 Jade 编码约定。如果您运行 Node.js 服务器并导航到浏览器中的主页，您会在 F12 工具中注意到文件正在正确提供。

对 app.js 的快速更改

有几件事我想改变app.js。首先，我想反转排序方向，以便首先发送最旧的消息，然后再发送。我还想在我计划接收新消息的同一频道上发出以前收到的聊天消息。更改将转到第 49 行和第 50 行app.js。这是结果：

var stream = collection.find().sort().limit(10).stream();
stream.on('data', function (chat) { socket.emit('chat', chat.content); });

不要忘记在重新运行文件CUSTOMCONNSTR_MONGOLAB_URI之前设置环境变量app.js，否则 Node.js 后端在无法连接到 MongoDB 时会崩溃。

启动发送按钮

是时候启动该发送按钮，以使用 WebSockets 将消息框中的消息发送到聊天通道上的后端服务器。

var socket = io();
$('#send-message-btn').click(function () {
    var msg = $('#message-box').val();
    socket.emit('chat', msg);
    $('#messages').append($('<p>').text(msg));
    $('#message-box').val('');
    return false;
});
socket.on('chat', function (msg) {
    $('#messages').append($('<p>').text(msg));
});

1号线

我们想创建一个套接字，我们可以通过调用文件io()中的函数来实现socket.io-client.js。

2号线

之后，我们想使用jQuery的$()函数和click()方法在点击“发送消息”按钮时执行一个函数。

3号线

$()我们将使用 jQuery 的函数和val()方法获取消息框中的字符串值。

4号线

我们使用emit()我们在第 1 行中创建的套接字变量上的函数在包含消息框值的“聊天”通道上发送消息。

5-7 号线

此时，我们将消息框中的消息附加到作为其 ID 的div有messages，以便用户可以看到消息已发送。我们将消息框的值分配给一个空字符串以清除它。

9-10 号线

我们希望将在聊天频道上从其他用户收到的消息附加到作为其 ID的div有。messagesNode.js 后端不会重新发送客户端写回给自己的消息，但这没关系，因为我们立即在click()函数处理程序中添加了消息。

结论

瞧！您已经使用 WebSockets 连接了后端和前端。如果您想识别聊天室中的人或为每个用户添加头像，这取决于您，但您可以继续使用此聊天室。在下一部分中，我将向您展示如何将这个匿名聊天室部署到 Azure 并展示如何调试它。

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 cloud@ksuyun.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.daxuejiayuan.com/10400.html