如何用javascript實現的簡約聊天框

這篇文章主要講解了“如何用javascript實現的簡約聊天框”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何用javascript實現的簡約聊天框”吧！

用JavaScript實現的輪詢的優點和缺點：

　　1. 優點：很容易實現，不需要任何服務器端的特定功能，且在所有的瀏覽器上都能工作。

　　2. 缺點：這種方法很少被用到，因為它是完全不具伸縮性的。試想一下，在100個客戶端每個都發出2秒鐘的輪詢請求的情況下，所損失的帶寬和資源數量，在這種情況下30%的請求沒有返回數據。

代碼實現：頁面使用了 Uediter 編輯器，后臺存儲最新消息，獲取最新消息

rootroom.js

var login = true;
//發送請求函數
function sendRequest()
{
  if (ueditor.hasContents()) {
    ueditor.sync();
    $("#chatMsg").val(ueditor.getContent());
  }
  //input是個全局變量，就是用戶輸入聊天信息的單行文本框
  var chatMsg = $("#chatMsg").val();
  var datas="chatMsg=" + chatMsg;
  $.ajax({
    type: "post",
    url: "/chat",
    data: datas,
    datatype: "text",
    success:function(data){
      if(data=="nologin")
      {
        login=false;
        alert("您還沒有登錄，請先登錄");
        window.location.href="/index.jsp";
      }
      else
      {
        login=true;
        //使用chatArea多行文本域顯示服務器響應的文本
        $("#chatArea").html(data);
      }
      //清空輸入框的內容
      $("#chatMsg").val("");
      ueditor.setContent("");
    }
  });
}
function sendEmptyRequest()
{
  var datas="";
  $.ajax({
    type: "post",
    url: "/chat",
    data: datas,
    datatype: "text",
    success:function(data){
      
      if(data=="nologin")
      {
        login=false;
        alert("您還沒有登錄，請先登錄");
        window.location.href="/index.jsp";
      }
      else
      {
        login=true;
        //使用chatArea多行文本域顯示服務器響應的文本
        $("#chatArea").html(data);
      }
    }
      
  });

  //指定0.8s之后再次發送請求
  if(login==true)
  {
    setTimeout("sendEmptyRequest()" , 800);
  }
}

function enterHandler(event)
{
  //獲取用戶單擊鍵盤的“鍵值”
  var keyCode = event.keyCode ? event.keyCode 
    : event.which ? event.which : event.charCode;
  //如果是回車鍵
  if (keyCode == 13)
  {
    sendRequest();
  }
}

感謝各位的閱讀，以上就是“如何用javascript實現的簡約聊天框”的內容了，經過本文的學習后，相信大家對如何用javascript實現的簡約聊天框這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！