WEB訊息提醒實現之二實現方式-Jquery Ajax長輪詢

阿新 • • 發佈：2019-01-20

Jquery Ajax長輪詢

原理

Jquery Ajax長輪詢的原理主要是，前臺客戶端傳送ajax請求到伺服器，伺服器接收到請求之後會保持住連線，直到有新訊息才返回響應資訊並關閉連線，客戶端處理完響應資訊後再向伺服器傳送新的請求。

優點：在無訊息的情況下不會頻繁的請求，耗費資源小。
缺點：伺服器保持住連線會消耗資源。

jquery ajax長輪詢的過程如下圖：

輸入圖片說明

可以看到，長輪詢的關閉連線有兩種情況：

伺服器有新的資料，正常響應，斷開連線
請求超時，斷開連線

例項

傳送訊息的Servlet和前面的一樣

下面是長輪詢時候伺服器的Servlet：

/**
 * 基於http長連線的ajax長輪詢實現訊息提醒
 * @author 馬藝俊
 *
 */
public class JsLongPollingMsgServlet extends HttpServlet {

@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException {

    req.setCharacterEncoding("utf-8");

    PrintWriter out = resp.getWriter();

    MessageDao msgDao = new MessageDao();

    String pageMsgNumStr = req.getParameter("pageMsgNum");
    if(pageMsgNumStr==null || "".equals(pageMsgNumStr)){
        pageMsgNumStr = "0";
    }

    int pageMsgNum = Integer.parseInt(pageMsgNumStr);

    int num = 0;
    StringBuffer json = null;
    while(true){
        num = msgDao.getMsgNum();
        //資料發生改變 將資料響應客戶端
        if(num != pageMsgNum){
            json = new StringBuffer("{");
            json.append("\"msgNum\":"+num);
            json.append("}");
            break;
        }else{
            //沒有新的資料 保持住連線
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    }
    out.write(json.toString());
    out.close();
}

}

在這個Servlet裡，接受到請求之後會進入一個死迴圈，迴圈裡面會判斷訊息資料是否發生了改變，如果沒改變的話會保持住連線，要是這段時間到了連線超時時間，請求會超時，伺服器斷開連線，客戶端則會重新建立請求；要是這段時間檢測到有資料改變，則會將資料響應給客戶端，正常斷開連線，客戶端再重新建立請求。

下面是長輪詢的頁面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServ    erPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery-easyui-v1.4.4/jquery.min.js"></script>

<script type="text/javascript">

$(function(){
    getMsgNum();
});
function getMsgNum(){
    $.ajax({
        url:'JsLongPollingMsgServlet',
        type:'post',
        dataType:'json',
        data:{"pageMsgNum":$("#pageMsgNum").val()},
        timeout:5000,
        success:function(data, textStatus){
            if(data && data.msgNum){
                                    //請求成功，重新整理資料
                $("#msgNum").html(data.msgNum);
                                    //這個是用來和後臺資料作對比判斷是否發生了改變
                $("#pageMsgNum").val(data.msgNum);
            } 
            if(textStatus == "success"){
                                    //成功之後，再發送請求，遞迴呼叫
                getMsgNum();
            }
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
            if(textStatus == "timeout"){
                                    //有效時間內沒有響應，請求超時，重新發請求
                getMsgNum();
            }else{
                                    // 其他的錯誤，如網路錯誤等
                getMsgNum();
            }
        }
    });
}

</script>
  </head>

  <body>
<div>
    <input id="pageMsgNum" name="pageMsgNum" type="hidden"/>
    您有<span id="msgNum" style="color: red;">0</span>條訊息!
</div>
<div>
    <p id="title">title</p>
    <p id="content">content</p>
</div>
  </body>
</html>

測試

輸入圖片說明

現在還沒有新的訊息，我們可以按F12看下客戶端傳送請求的特點

輸入圖片說明

可以看到，客戶端每次傳送請求之後，5s(請求超時時間)內由於後臺伺服器保持住連線並且沒有響應前臺，所以5s後請求超時了，請求被取消(cancel)，然後客戶端又重新發送了請求

我們訪問傳送訊息的頁面，提交新訊息

輸入圖片說明

再看看longPollingPage.jsp

輸入圖片說明

訊息回來了~

再看看請求的樣子

輸入圖片說明

可以看到，我們提交了訊息之後，輪詢請求檢測到資料發生變化，就正常地返回資料響應了

WEB訊息提醒實現之二實現方式-Jquery Ajax長輪詢

Jquery Ajax長輪詢原理 Jquery Ajax長輪詢的原理主要是，前臺客戶端傳送ajax請求到伺服器，伺服器接收到請求之後會保持住連線，直到有新訊息才返回響應資訊並關閉連線，客戶端處理完響應資訊後再向伺服器傳送新的請求。優點：在無訊息的

WEB訊息提醒實現之二實現方式-Jquery Ajax輪詢

Jquery Ajax輪詢原理普通的jquery ajax輪詢的原理主要是，客戶端通過定時器定時傳送ajax請求到伺服器,伺服器獲取資料後馬上響應並關閉連線。普通的jquuery ajax輪詢過程如下圖：可以看到，每次請求都會到伺服器中獲

網頁實時聊天之js和jQuery實現ajax長輪詢

js和jQuery實現ajax長輪詢眾所周知，HTTP協議是無狀態的，所以一次的請求都是一個單獨的事件，和前後都沒有聯絡。所以我們在解決網頁實時聊天時就遇到一個問題，如何保證與伺服器的長時間聯絡，從而源源不段地獲取資訊。一直以來的方式無非有這麼幾種：1、長連線，即伺服器端不斷

統計學習方法ｃ++實現之二　k近鄰法

統計學習方法ｃ++實現之二 k近鄰演算法前言 k近鄰演算法可以說概念上很簡單，即：“給定一個訓練資料集，對新的輸入例項，在訓練資料集中找到與這個例項最鄰近的k個例項，這k個例項的多數屬於某個類，就把該輸入分為這個類。”其中我認為距離度量最關鍵，但是距離度量的方法也很簡單，最長用的就是歐氏距離，其他的距離

多爬蟲實現之二 -- 爬蟲實現多個解析函式

目標完成spider中如果解析函式呼叫的封裝掌握getattr的方法完成通過meta在不通過的解析函式中傳遞資料的方法 1. 爬蟲實現多個解析函式的意義 2 響應物件的解析方法封裝為response物件封裝xpath、正則、json、等方法和屬

FFmpeg-4.0 的filter機制的架構與實現.之二結構體關係與定義

4. Filter的結構體關係圖與定義 4.1 結構體間的關係圖 filter涉及的結構體，主要包括： > FilterGraph, AVFilterGraph > InputFilter, InputStream, OutputFilter, OutputStream

[手把手系列之二]實現多層神經網路

完整程式碼：>>點我歡迎star,fork,一起學習網路用途或者說應用場景：使用單層神經網路來識別一張圖片是否是貓咪的圖片。數學表示給定一張圖片XX 送到網路中，判斷這張圖片是否是貓咪的照片？網路架構多層

View 的滑動實現之二（ScrollTo,ScrollBy和Scroller）

在本篇文章的前面，我們講到了使用Layout的方法實現View的滑動今天給大家介紹一下使用ScrollTo,ScrollBy和Scroller來實現View的滑動。一、ScrollTo,ScrollBy 在View中，系統專門提供了scrollTo和scrollBy兩種

輪詢、長輪詢與Web Socket的前端實現

ebs ole 推送 require PE sockets str 服務 port Web Socket 應用場景:實現即時通訊:如股票交易行情分析、聊天室、在線遊戲等，替代輪詢和長輪詢輪詢輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP r

搭建Linux-java web運行環境之二：安裝mysql

navi sql glibc x86 卸載系統服務依賴 host mys 環境 OS:Red Hat Enterprise Linux Server release 7.3 (Maipo) JDK:jdk-7u80-linux-x64.tar.gz Tomcat:ap

正向最大匹配演算法實現之python實現

1.python 版本：python 3.6.4 2.思路： s1.匯入分詞詞典，儲存為字典形式dic,匯入停用詞詞典stop_words，儲存為字典形式,需要分詞的文字檔案cutTest.txt,儲存為字串chars s2.遍歷分詞詞典，找出最長的詞，長度為max_chars s3

Java Web--增刪改查之二介面後臺java程式碼（轉載參考）

/** * */ /** * @author Administrator * */ package dao; import java.sql.*; public

通過spring提供的DeferredResult實現長輪詢服務端推送訊息

DeferredResult字面意思就是推遲結果，是在servlet3.0以後引入了非同步請求之後，spring封裝了一下提供了相應的支援，也是一個很老的特性了。DeferredResult可以允許容器執行緒快速釋放以便可以接受更多的請求提升吞吐量，讓真正的業務邏輯在

C++ COM實現之三實現類廠

類廠是什麼？就是一個工廠用於建立各種產品，將建立好的產品提供給外部使用者使用。其實現如下： factory.h #pragma once #include "unknwn.h" class CClassFactory : public IClassFactory { pu

基於AJAX的長輪詢(long-polling)方式實現COMET例子

什麼是 Comet? 解釋： Alex Russell （ Dojo Toolkit 的專案 Lead ）稱這種基於 HTTP 長連線、無須在瀏覽器端安裝外掛的 “ 伺服器推 ” 技術為 “Comet” 。有兩種實現 Comet 應用的實現模型，目前主要討論的是基於 AJ

實現Comet(伺服器推送)的兩種方式：長輪詢和http流

Comet 是一種高階的Ajax技術，實現了伺服器向頁面實時推送資料的技術，應用場景有體育比賽比分和股票報價等。實現Comet有兩種方式：長輪詢與http流長輪詢是短輪詢的翻版，短輪詢的方式是：頁面定時向伺服器傳送請求，看有沒有更新的資料。而長輪詢的方式是，頁面向伺服器發起一

web前端【第十二篇】jQuery文檔相關操作

scroll 知識點 eight 查看 for otto fix jquer utf-8 一、相關知識點總結1、CSS .css() - .css("color") -> 獲取color css值 - .css("color", "#ff

基於HTTP的長輪詢簡單實現

Web客戶端與伺服器之間基於Ajax（http）的常用通訊方式，分為短連線與長輪詢。短連線：客戶端和伺服器每進行一次HTTP操作，就建立一次連線，任務結束就中斷連線。在長輪詢機制中，客戶端像傳統輪詢一樣從伺服器請求資料。然而，如果伺服器沒有可以立即返回給客戶端的資料，則不會立刻返回一個空結果，而是保持這

菜鳥先飛之二維碼jquery-qrcode外掛生成

二維碼的概述二維碼又稱QR Code，QR全稱Quick Response，是一個近幾年來移動裝置上超流行的一種編碼方式，它比傳統的Bar Code條形碼能存更多的資訊，也能表示更多的資料型別。二維碼的生成工具 java生成

利用長輪詢實現微信網頁版掃碼登入

掃碼登入操作過程手機登入微信，利用“掃一掃”功能掃描網頁上的二維碼手機掃描成功後，提示“登入網頁版微信”；網頁上顯示“成功掃描請在手機點選確認以登入”手機端點選“登入網頁版微信”，網頁跳轉到使用者的微信操作介面整個掃碼登入的操作過程還是挺簡單的，而且互動地實時性比較

WEB訊息提醒實現之二 實現方式-Jquery Ajax長輪詢

Jquery Ajax長輪詢

原理

例項

測試

相關推薦

WEB訊息提醒實現之二實現方式-Jquery Ajax長輪詢