Question

我正在开发node.js并开始创建一个我成功构建它的聊天应用程序，但问题是我希望当客户端点击发件人的姓名（发送邮件的人）时，聊天窗口应该打开给客户）。我将向你展示我迄今为止所做的事情。

在这里你可以看到聊天框已经打开但是我希望它可以在从用户列表＆＃34;用户列表中选择用户时打开。每当选择新用户并删除以前的内容时，应更换聊天框的内容。这是我的index.html代码：

<div class="col-md-4 user-list">
            <h2>List of Users</h2>
            <ul class="list-group">
                <li class="list-group-item" 
                    ng-repeat="user in userList"
                    ng-class="{ 'active' : user.id == selectedUser.uid}"
                    ng-click = seletedUser(user.id,user.userName);
                    ng-style="{
                        'cursor': user.id === socketId ? 'not-allowed' :'pointer'
                    }"
                    >
                    <span id='{{user.id}}' >{{ user.id === socketId ? 'You': user.userName }}</span>
                    <span id='{{user.id + "notify"}}' style="color:black; opacity:0.5; font:2px; padding:5px; visibility:hidden;"> {{'typing...'}}</span>
                </li>
            </ul>

            </div>
</div>
            <div class="container" id="messages">
                <div class="row">
                    <div class="col-md-8">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <span class="glyphicon glyphicon-comment"></span> {{'Chat -' + selectedUser.uname}}
                            </div>
                            <div class="panel-body">
                                <ul class="chat col-md-7"
                                ng-repeat = "message in messages" 
                                ng-style ="{'float':message.fromid == socketId ? 'left' : 'right'}">
                                    <li>
                                        <div class="clearfix">
                                            <div class="direct-chat-text"
                                            ng-style = "{'background-color': message.fromid == socketId ? '#d9edf7' : '#62f3bc'}"
                                            >
                                                {{message.msg}}

                                            </div>

                                        </div>
                                    </li>
                                </ul>
                                <br></br>
                            </div>
                            <div class="panel-footer">
                                <div class="input-group">
                                    <textarea elastic type="text" class="form-control custom-control" ng-model='message' ng-keyup="keyup()" ng-keydown="keydown()" ng-change="change()" placeholder="Type your message here..."></textarea>
                                    <span class="input-group-addon btn btn-primary" ng-click="sendMsg()"><i class="glyphicon glyphicon-send"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

如果您需要与代码相关的任何其他信息，请发表评论。因为我是node.js的新手所以帮助我解决我的问题。

更新我的script.js代码有足够的细节：

app.controller('app', ($scope,$timeout,socket) => {

$scope.socketId = null;
$scope.selectedUser ={ uid: null, uname: null};
$scope.messages = [];
$scope.msgData = null;
$scope.userList = [];
var TypeTimer;                
var TypingInterval = 1000;


$scope.username = window.prompt('Enter Your Name'); 
if ($scope.username === '') {
    window.location.reload();

}


$scope.seletedUser = (id,name) => {
    if(id === $scope.socketId)
    {
        alert("Can't message to yourself.")
    }
    else
    {
        $scope.selectedUser =
        {
            uid: id,
            uname: name
        }
    }
};
    $scope.sendMsg = () => {
//  const keyCode = $event.which || $event.keyCode; 

    if ($scope.message !== null && $scope.message !== '' && $scope.selectedUser.uid !== null) {     
        socket.emit('getMsg',{
            toid : $scope.selectedUser.uid,
            fromid: $scope.socketId,
            msg : $scope.message,
            name : $scope.username
        });
        $timeout.cancel(TypeTimer);
        TypeTimer=$timeout( function(){
        socket.emit('getTypingNotify',{
        toid : $scope.selectedUser.uid,
        fromid: $scope.socketId,
        msg:"hidden"
           });
          });   
        $scope.message =  null;
        console.log($scope.selectedUser.uid);
    }
    else
    {
        alert("enter a message or select a User to send message");
    }
};



socket.emit('username',$scope.username);

socket.on('userList', (userList,socketId) => {
    if($scope.socketId === null){
        $scope.socketId = socketId;
    }
    $scope.userList = userList;
});     


socket.on('exit', (userList) => {
    $scope.userList = userList;
});

socket.on('setMsg',(data) => {
        document.getElementById(data.fromid+'notify').style.visibility= data.msg;

      });       

socket.on('sendMsg', (data) => {
    //console.log('send');
    $scope.messages.push(data);
});

Answer 1

我的理解是你想要点击一个按钮或一些文本框弹出你可以使用如下所示的角度bootstarp模型

"https://plnkr.co/edit/?p=preview"

并控制angularjs控制器中的关闭和打开，并发送服务器端的聊天详细信息

Answer 2

在搜索了一些教程和问题后（在StackOverflow上），我找到了一种方法，并将与大家分享。

我创建了一个目录名称“open”，并显示了一个“open”指令的属性，以显示和隐藏对话框。

app.directive('open',function() {
return {
    restrict: 'E',
    template: `<div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <span class="glyphicon glyphicon-comment"></span>{{"Chat -" + selectedUser.uname}}
                            </div>
                            <div class="panel-body">
                                <div ppp-chat></div>
                                <br></br>
                            </div>
                            <div class="panel-footer">
                                <div class="input-group">
                                    <textarea msd-elastic type="text" class="form-control custom-control" ng-model="message" ng-keyup="keyup()" ng-keydown="keydown()" ng-change="change()" placeholder="Type your message here..."></textarea>
                                    <span class="input-group-addon btn btn-primary" ng-click="sendMsg()"><i class="glyphicon glyphicon-send"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`,
        replace:true,
        scope:false,
        link: function postLink(scope,element,attrs) {
            scope.$watch(attrs.visible,function(value){
                if(value == true)
                {
                    $(element).show();
                }
                else
                    $(element).hide();
            });
            $(element).on('show.bs.open',function() {
                scope.$apply(function(){
                    scope.$parent[attrs.visible] = true;
                });
            });
            $(element).on('hidden.bs.open',function() {
                scope.$apply(function(){
                    scope.$parent[attrs.visible] = false;
                });
            });
        }   
    };

}）;

控制器中切换聊天窗口（隐藏或显示）的方法

$scope.toggleChat = () => {
    $scope.showChat = false;
    $scope.showChat = !$scope.showChat;
};

此toggleChat用于更改showChat范围变量的值，该变量用于通过将showChat值更改为true或false来打开（关闭）聊天框的可见性。

在html中，我用

替换了我的id =“messages”元素（带子子元素）

<open visible="showChat">
            </open>

如何使用node.js

2 个答案: