WEB訊息提醒實現之二 實現方式-Jquery Ajax長輪詢
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、長連線,即伺服器端不斷
統計學習方法c++實現之二 k近鄰法
統計學習方法c++實現之二 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生成
利用長輪詢實現微信網頁版掃碼登入
掃碼登入操作過程 手機登入微信,利用“掃一掃”功能掃描網頁上的二維碼手機掃描成功後,提示“登入網頁版微信”;網頁上顯示“成功掃描 請在手機點選確認以登入”手機端點選“登入網頁版微信”,網頁跳轉到使用者的微信操作介面 整個掃碼登入的操作過程還是挺簡單的,而且互動地實時性比較