Question

我正在使用聊天应用程序。我正在将其用于聊天演示应用程序。但这不是我想要的。我想在我的应用程序中实现一对一聊天。但这是一对多聊天应用程序（群聊）。请帮助我了解使用Node JS服务器进行一对一聊天的概念。如何过滤？

服务器端

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var users = [];
var onlineuser = [];

app.get('/',(req,res)=>{
    res
    .sendFile(__dirname + '/index.html');
});
io.sockets.on("connection" , (socket)=>{

    users.push(socket);

    console.log("New user connected "+users.length);

    socket.on("disconnect" ,()=>{
        users.splice(users.indexOf(socket),1);
// splits online user;
        onlineuser.splice(onlineuser.indexOf(socket.username),1);
        console.log("User disconnect" + '<br>' + "Number of connected users are " +  users.length);
    });
    socket.on("new user" , (data)=>{
        socket.username = data;
        onlineuser.push(socket.username);
        console.log("user connected " + socket.username);
        updateuser();
    });
    socket.on("msg" , (name,msg)=>{

        io.sockets.emit("rmsg",{name:name,msg:msg});
    });
    function updateuser(){

            io.sockets.emit("get user" , onlineuser);
            onlineuser.splice(onlineuser.indexOf(socket.username),1);

    }

});




http.listen(1234, (err)=>{ 

    console.log("Listenig at port 3000");
});

客户端

<html>

<head>
<title>Demo App</title>
    <!-- jQuery library -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="/socket.io/socket.io.js"></script>

    <script>

        var username = "";
        var socket =io("http://localhost:1234/");

       socket.on("get user",function(data){

           $("#message").append(data + " is online ,  " ) ;




        });

        socket.on("rmsg",function(data){
            if(username==data.name) {

                var html = '<div class="col-md-8 agent">' +
                        '<p ><strong>'+data.name+':</strong> '+data.msg+'</p>' +
                        '</div>';
            }
            else {
                var html = '<div class="col-md-8 customer">' +
                        '<p ><strong>'+data.name+':</strong> '+data.msg+'</p>' +
                        '</div>';
            }
            $("#message").append(html);

        });


        $(document).ready(function(){
            $("#unamesave").click(function(){
                   socket.emit("new user",$("#usrname").val());
                username=$("#usrname").val();
                   $("#usrname").val('');
            });


            if(username==""){
                $("#myModal").modal();
            };

            $("#msgbox").keyup(function(e){
               if(e.keyCode==13){
                   socket.emit("msg",username, $("#msgbox").val());
                   $("#msgbox").val('');
               }
            });

        });

    </script>
<style>
    #message{
        max-height: 400px;
        overflow: scroll;
        overflow-x: hidden;
    }
    .customer strong{
         color: red;
     }
    .agent strong{
        color: blue;
    }
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-8 col-md-offset-2 border">
                <div class="col-md-8 col-md-offset-2 well">
                    <h3 class="col-md-offset-4">Live chat online</h3>
                    <div class="col-md-8">
                    <p >Welcome to chat application</p>
                </div>
                    <div class="col-md-12" id="message" > 


</div>
                    <textarea id="msgbox" style="width: 100%"></textarea>
                </div>

            </div>
        </div>
    </div>
</div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Please Enter Your Name</h4>
                </div>
                <div class="modal-body">
                    <form role="form">
                        <div class="form-group">
                            <label for="usrname"><span class="glyphicon glyphicon-user"></span> Your Name</label>
                            <input type="text" class="form-control" id="usrname" placeholder="Enter Name">
                        </div>

                        <button type="button" id="unamesave" data-dismiss="modal" class="btn btn-default btn-success btn-block">
                            <span class="glyphicon glyphicon-off"></span> Save </button>
                    </form>

                </div>

            </div>

        </div>
        <div id="malik">

        </div>
    </div>


</body>
</html>

如何在node和socket.io中创建一对一聊天功能

0 个答案: