Question

我计划使用前面的ajax，java脚本和后面的java rest api来实现聊天应用程序。一切顺利，但每当我尝试打开多个聊天框与多个用户聊天。我正在努力创建与不同用户关联的不同聊天框。我的整个前端代码如下。有人能帮帮我吗？提前谢谢......

<!DOCTYPE html>
<html lang="en">
<head>
<title>Chat Application</title>
    <style>
        .userListDiv{
            border:1px solid blue;
            overflow: auto;
            width:500px;

        }
        #messageBox{
            border:2px solid black;
            overflow: auto;
            height:auto;
            width:300px;
        }
        #messageInput{
         size:100px;
            border:1px solid black;
        }
    </style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Raleway'
    rel='stylesheet' type='text/css'>
    <link rel="stylesheet"
    href="//cdn.jsdelivr.net/jquery.sidr/2.2.1/stylesheets/jquery.sidr.light.min.css">

    </head>

    <body>
        <button id='myId' value =userId></button>

        <div class="userListDiv"></div>
        <div class ="chatbox">
        <div id ="messageBox">
            </div>
        </div>




<script>
 var baseUrl="http://localhost:8080/sampleHospital/webapi/";

$(document).ready(function(){

 $('#myId').hide();
 $('.chatbox').hide();


    var timeOut = 1000;

    $.ajax({
        url: baseUrl+"users",
        method:"GET",
        datatype:"xml",
        success:getUsers,
        error: function(xhr,ajaxOption,thrownError){
           console.log(xhr.status);
           console.log(thrownError); 
        }


    }, timeOut);

        });


function sendMessage(senderId,recieverId){
   var Inputmessage= $('.messageInput').val();
    var message = $.parseXML('<message><date></date><id></id><senderID></senderID><recieverID></recieverID><content></content></message>');
    var $messageXml = $(message);
    $messageXml.find('content').append(Inputmessage);
    $messageXml.find('senderID').append(senderId);
    $messageXml.find('recieverID').append(recieverId);

    console.log(message);
    $('.messageInput').val="";
    $.ajax({
        url: baseUrl+"messages/",
        type:"POST",
        dataType:'xml',
        data:message,
        processData:false,
        contentType:"application/xml",
        success: getMessage,


        error: function(xhr){
        console.log(xhr.status);
        console.log("error!!!");
        }


    });

}
function requestMessage(senderID, recieverID){
            var timeInterval = 1000;

        $(".chatbox").fadeIn(500);
        $(".chatbox").append("<div id ='chatContainer'></div>");
        $('.chatbox').append('<input type="text" class="messageInput" placeHolder="your message here"/><button class="sendMessage" onclick="sendMessage(1,2)">send message</button>');
        $.ajax({
            url:baseUrl +"messages/"+senderID +"/"+ recieverID,
            method:"GET",
            datatype:"xml",
            success :getMessage,
            error: function(xhr ,ajaxOptions,thrownError){
            console.log(xhr.status);
            console.log(thrownError);
        }

        }, timeInterval);

        }
function getMessage(data,status){
    console.log("getting messages");
    console.log(data);
     var messageBox =$("#messageBox") ;
     messageBox.empty();
     messageBox.append($('<ul id ="messagesList"></ul>'));
        $(data).find('message').each(function(){
            var message = $(this).find('content').text();
            var date = $(this).find('date').text();
            var sender = $(this).find('senderID').text();
            var receiver = $(this).find('recieverID').text();
            console.log(message);

     $("#messagesList").append('<li>'+message+'</li>');
        });

}
      function getUsers(data,status){
         console.log("getting users list");
         console.log(data);
         var userListBox = $(".userListDiv");
         userListBox.empty();
          userListBox.append('<ul class="usersList"></ul>');
         $(data).find('user').each(function(){
             var name = $(this).find('fullName').text();
         var otherid =   $(this).find('id').text();


           var myId =2;

          // console.log(name,otherid);



             $('.usersList').append('<li class='+name+' onclick="requestMessage(1,2)"><a href="javaScript:void(0)">'+name+'</li>');
     });
      }
</script>
    </body>

</html>

Answer 1

在请求消息中

您正在尝试创建chatcontainer div。对于您使用相同div id的任何用户，您将无法正确更新值。您应该唯一地创建id，可以附加接收者ID。如果有那个id的div，那么你不应该再创建它。你应该使用现有的div并更新消息。

处理ajax jquery中的多个聊天框

1 个答案: