Question

在这个应用程序中我已经有一个聊天栏，我已经可以看到所有在线用户，但我想实现一个用户可以点击左栏上的另一个用户的名字（显示所有登录的用户），一旦他点击用户名，就会出现一个小窗口，在这个窗口中有一个提交按钮和一个输入文本，用一条消息填充，一旦点击提交按钮，该消息就应该发送给其他用户。我需要一些帮助，我该如何实现????

这是我的index.html

    enter code here
<head>
<html>
    <title>Chat</title>
    <script src="/socket.io/socket.io.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style>
    body{

        margin-top: 30px;
    }
    .chat-messages{
    height: 300px;
    overflow-y:scroll;
    border: 1px solid black;

}

    #messageForm , #chat{
        display: none;
    }

    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="well" id="userwall">
                    <h3>Online Users</h3>
                    <ul class="list group" id="users"></ul>
                </div>
            </div>
    <div class="col-md-8">
                <div class="chat-messages" id="chat"></div>
                <form id="messageForm">
                    <div class="form-group">
                        <label>Enter Message</label>
                        <!--<div id="chat-messageForm">
                        </div>
                    <textarea class="chat-textarea" placeholder="Type your message"></textarea>-->

                        <textarea class="form-control" id="message"></textarea>
                        <br/>
                        <input type="submit" class="btn btn-primary" value="Send Message"/>
                    </div>
                </form>


                <form id="userForm">
                    <div class="form-group">
                        <label>Enter Username</label>
                        <input class="form-control" style="width:200px;" id="username"/>
                        <br/>
                        <input type="submit" class="btn btn-primary" value="Enter Username"/>
                    </div>
                </form>
            </div>

       </div>
  </div>


<script>
    $(function(){
        var socket = io.connect();
        var $messageForm = $('#messageForm');
        var $message = $('#message');
        var $chat = $('#chat');
        var $userForm = $('#userForm');
        var $username = $('#username');
        var $users= $('#users')
        var $userwall = $('userwall')

        $messageForm.keypress(function(e){  
            if(e.which == 13){
            e.preventDefault();
            socket.emit('send message',$message.val());
            $message.val('');
        }
        });

        socket.on('new message',function(data){
            $chat.append('<div><strong>'+data.user+':'+'</strong>'+data.msg+'</div');
        });
        $userForm.submit(function(e){
            e.preventDefault();
            if($username.val() == ''){
                alert("Please enter username!");
            }
            else{
            socket.emit('new user',$username.val());
            $userForm.hide();
            $messageForm.show();
            $chat.show();
            $userwall.show();

            alert("Welcome"+':'+$username.val());
        }
        });


socket.on('get users',function(data){

 var html="";
    for(i=0; i<data.length;i++){
        html += '<li class="list-group-item">'+data[i]+'</li>';
    }
    $users.html(html);
    });

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

</script>

</body>
</html>

我的server.js

var express = require ('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
connections = [];
users=[];

server.listen(process.env.PORT || 3000);
console.log('server running...');

//create a route
app.get ('/', function (req, res){
    res.sendFile(__dirname+'/index.html');
});

io.sockets.on('connection',function(socket){
    connections.push(socket);
    console.log('Connected: %s sockets connected', connections.length);

//disconnect
    socket.on('disconnect',function(data){
        users.splice(users.indexOf(socket.username),1)
        updateUsernames();
        connections.splice(connections.indexOf(socket),1);
        console.log('Disconnected: %s sockets connected',connections.length); 
    });
    //send message
    socket.on('send message',function(data){
        console.log(data)
        io.sockets.emit('new message',{msg: data, user: socket.username });
    });
    //new users
    socket.on('new user',function(data){
        socket.username = data;
        users.push(socket.username);
        updateUsernames();
    });
    function updateUsernames(){
        io.sockets.emit('get users',users);
    }
    //PM USERS

});

我想私下给用户留言

0 个答案: