个人中心
gpt4 book ai didi

node.js - 在node.js 中与socket.io 进行私有(private)聊天

转载 作者：太空宇宙 更新时间：2023-11-04 02:53:14 24 4
gpt4 key购买 nike

我正在尝试创建一个聊天系统，用户可以在其中向每个人发送消息(并且此消息显示在 id 为“chat”的 div 中)，并且我已经实现了此功能。现在我想实现私有(private)聊天。用户可以点击右栏上的另一个用户的名字(显示所有登录的用户)，一旦他点击用户名，就会出现一个小窗口(div 类为“chatpopup”)，在这个窗口中有一个提交按钮和一个要填写消息的输入文本，一旦单击提交按钮，消息就会发送给其他用户。

这就是我所拥有的，如果我单击用户(在屏幕右侧)，则会显示小窗口(chatpopup)，但是当我尝试在这个小窗口内提交表单时，应用程序崩溃了。我还想收到一些有关构建私有(private)聊天的提示，例如如何在应接收消息的用户客户端打开一个新窗口(包含消息接收)？

index.html

<html>
<head>
    <title>Chat with socket.io and node.js</title>
    <style>
        #contentWrap
        {
            width:100%;
            display: none;
        }
        #chatWrap {float: left; width:80%;}
        #chat
        {
            height:500px;
            width:96%;
            border: 1px #000 solid;
            padding-left:2%;
            padding-right:2%;
        }
        #users 
        {
            margin-left:82%; width:15%;
            height:500px; 
            border: 1px #000 solid; 
            text-align:right;
        }
        #send-message {margin-top:3%; width:100%;}
        #message {width:80%;}
        .err1r{ padding-top:1%;
            color: red;
        }
        .whisper{
            color: gray;
            font-style: italic;
        }
        p.sideusername:nth-child(even) {background-color:#FAFAFA; padding-bottom:5%; padding-top:5%;}
        p.sideusername:nth-child(odd) {background-color: #f5f5f0; padding-bottom:5%; padding-top:5%;}
        .chatpopup {width:350px; height: 250px; background-color:blue;}
        #interlocutore {background-color:red; height: 30px; text-align: left;}
        #msgspace {height:150px; background-color:yellow;}
    </style>
</head>
<body>
    <div id="nickWrap">
        <p>Enter a username:</p>
        <p id="nickError"></p>
        <form id="setNick">
            <input size="35" id="nickname"></input>
            <input type="submit"></input>
        </form>
    </div>

    <div id="contentWrap">
        <div id="chatWrap">
            <div id="chat"></div>
            <form id="send-message">
                <input size="35" id="message"></input>
                <input type="submit"></input>
            </form>

        </div>
        <div id="users"></div>
    </div>


    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        jQuery(function($){
            var socket = io.connect();
            var $nickForm = $('#setNick');
            var $nickError = $('#nickError');
            var $nickBox = $('#nickname');
            var $users = $('#users');
            var $messageForm = $('#send-message');
            var $messageFormPopup = $('#send-message-popup');
            var $messageBox = $('#message');
            var $messageBoxPopup = $('#messagePopup');
            var $chat = $('#chat');

            $nickForm.submit(function(e){
                e.preventDefault();
                socket.emit('new user', $nickBox.val(), function(data){
                    if(data){
                        $('#nickWrap').hide();
                        $('#contentWrap').show();
                    } else{
                        $nickError.html('That username is already taken!  Try again.');
                    }
                });
                $nickBox.val('');
            });

            socket.on('usernames', function(data){
                $users.empty();
                for(var i=0; i < data.length; i++){
                    $users.append('<p class="sideusername">' + data[i] + "</p>");   
                }
            });

            $messageForm.submit(function(e)
            {
                e.preventDefault();
                socket.emit('send message', $messageBox.val(), function(data)
                {
                });
                $chat.append('<span class="error">' + data + "</span><br/>");
                $messageBox.val('');
            });

            $messageFormPopup.submit(function(e)
            {
                e.preventDefault();
                socket.emit('send popup message', $messageBoxPopup.val(), function(dataPopup)
                {

                });
                $messageBoxPopup.val('');
            });

            socket.on('load old msgs', function(docs){
                for(var i=docs.length-1; i >= 0; i--){
                    displayMsg(docs[i]);
                }
            });

            socket.on('new message', function(data){
                displayMsg(data);
            });

            function displayMsg(data){
                $chat.append('<span class="msg"><b>' + data.nick + ': </b>' + data.msg + "</span><br/>");
            }

            socket.on('whisper', function(data){
                $chat.append('<span class="whisper"><b>' + data.nick + ': </b>' + data.msg + "</span><br/>");
            });

            $(document).on("click", ".closepopup", function() {
                $(this).parents('.chatpopup').hide();
            });

            $(document).on("click", ".sideusername", function()
            {
                var interlocutore = $(this).text();
                $chat.append('<div class="chatpopup"><table><tr><td id="interlocutore"></td><td><p class="closepopup">X</p></td></tr><tr><td colspan="2" id="msgspace"></td></tr><tr><td colspan="2"><form id="send-message-popup"> <input size="35" id="messagePopup"></input><input type="submit"></input></form></td></tr></table></div>');
                $('#interlocutore').append(interlocutore);
            });

        });
    </script>
</body>
</html>

app.js

    var express = require('express'),
    app = express(),

server = require('http').createServer(app),
io = require('socket.io').listen(server),
mongoose = require('mongoose'),
users = {};
server.listen(3000);

    mongoose.connect('mongodb://localhost/chat', function(err)
    {
        if(err)
           console.log(err);
        else console.log('Connected to mongodb!');
    });

    var chatSchema = mongoose.Schema(
    {
        nick: String,
        msg: String,
        created: {type: Date, default: Date.now}
    });

    var Chat = mongoose.model('Message', chatSchema);
    app.get('/', function(req, res)
    {
        res.sendfile(__dirname + '/index.html');
    });

    io.sockets.on('connection', function(socket)
    {
        var query = Chat.find({});
        query.sort('-created').limit(8).exec(function(err, docs)
        {  // carico gli ultimi 8 messaggi in ordine di data
            if(err) throw err;
            socket.emit('load old msgs', docs);
        });

        socket.on('new user', function(data, callback)
        {
            if (data in users)
                callback(false);
            else
            {
                callback(true);
                socket.nickname = data;
                users[socket.nickname] = socket;
                updateNicknames();
            }
        });


        function updateNicknames()
        {
            io.sockets.emit('usernames', Object.keys(users));
        }

        socket.on('send message', function(data, callback)
        {
                var msg = data.trim();
                var newMsg = new Chat({msg: msg, nick: socket.nickname});
                newMsg.save(function(err)
                {
                    if(err) throw err;
                    io.sockets.emit('new message', {msg: msg, nick: socket.nickname});
                });

                socket.on('disconnect', function(data)
                {
                    if(!socket.nickname) return;
                    delete users[socket.nickname];
                    updateNicknames();
                });
        });


        socket.on('send popup message', function(data, callback)
        {
            /*var msgPopup = dataPopup.trim();
            if (msgPopup !== "")
                users[interlocutore].emit('whisper', {msg: msgPopup, nick: socket.nickname});
            */
                var msg = data.trim()+" hello";
                var newMsg = new Chat({msg: msg, nick: socket.nickname});
                newMsg.save(function(err)
                {
                    if(err) throw err;
                    io.sockets.emit('new message', {msg: msg, nick: socket.nickname});
                });
            socket.on('disconnect', function(data)
            {
                if(!socket.nickname) return;
                delete users[socket.nickname];
                updateNicknames();
            });
        });
    });

最佳答案

要使用socket.IO创建私有(private)聊天，您需要首先了解socket.IO中房间的工作原理。您可以找到大量教程。您还可以查看this发帖寻求帮助。

现在您需要扩展此功能以创建私有(private)聊天系统。为此，您需要为每个已连接或在线的客户端拥有一个唯一的 id。 socket.id 是每个客户端在加入聊天时获得的唯一 key 。

在客户端，您可以将名称与消息一起发送到服务器。你这样做:

socket.emit('privateMessage', 'theUserName', message);

在服务器端，您可以管理一组已连接的用户并保存他们的唯一用户名或id。

var connectedClients = {};

因此，每次用户连接到聊天时(您可能正在使用新用户事件)，请将用户的 ID 保存在connectedClients中。

connectedClients[username] = socket.id;

其中username是用户连接到聊天系统时发送到服务器的名称。 (我希望你知道如何做到这一点。如果不知道，请问我。)

然后我们创建一个监听器来监听 privateMessage 事件并向该特定用户发送消息，我们这样做:

socket.on('privateMessage', function(to, message) {
    var id = connectedClients[to];
    io.sockets.socket(id).emit('sendPrivateMessage', socket.username, message);
});

最后，在客户端，您的 sendPrivateMessage 监听器接收消息，您可以相应地更新您的 View 。

关于node.js - 在node.js 中与socket.io 进行私有(private)聊天，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35334071/

24 4 0
文章推荐： javascript - 将无类型数组编译为 C 的有效方法是什么？
文章推荐： css - 在单选按钮选择上叠加图像
文章推荐： c - 为什么使用 C 套接字程序发送和接收时文件大小不同？
文章推荐： html - 将元素对齐到上一行的底部
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com