使用輪詢&長輪詢實現網頁聊天室

阿新 • • 發佈：2020-12-21

前言

　　如果有一個需求，讓你構建一個網路的聊天室，你會怎麼解決？

　　首先，對於HTTP請求來說，Server端總是處於被動的一方，即只能由Browser傳送請求，Server才能夠被動迴應。

　　也就是說，如果Browser沒有傳送請求，則Server就不能迴應。

　　並且HTTP具有無狀態的特點，即使有長連結（Connection請求頭）的支援，但受限於Server的被動特性，要有更好的解決思路才行。

輪詢

基本概念

　　根據上面的需求，最簡單的解決方案就是不斷的朝Server端傳送請求，Browser獲取最新的訊息。

　　對於前端來說一般都是基於setInterval來做，但是輪詢的缺點非常明顯：

Server需要不斷的處理請求，壓力非常大

前端資料重新整理不及時，setInterval間隔時間越長，資料重新整理越慢，setInterval間隔時間越短，Server端的壓力越大

示例演示

　　以下是用Flask和Vue做的簡單例項。

　　每個使用者開啟該頁面後都會生成一個隨機名字，前端採用輪詢的方式更新記錄。

　　後端用一個列表儲存最近的聊天記錄，最多儲存100條，超過一百條擷取最近十條。

　　總體流程就是前端傳送過來的訊息都放進列表中，然後前端輪詢時就將整個聊天記錄列表獲取到後在頁面進行渲染。

　　缺點非常明顯，僅僅有兩個使用者線上時，後端的請求就非常頻繁了：

　　後端程式碼：

import uuid

from faker import Faker
from flask import Flask, request, jsonify

fake = Faker(locale='zh_CN')  # 生成隨機名
app = Flask(__name__)

notes = []  # 儲存聊天記錄，100條


@app.after_request  # 解決CORS跨域請求
def cors(response):
    response.headers['Access-Control-Allow-Origin'] = "*"
    if request.method == "OPTIONS":
        response.headers["Access-Control-Allow-Headers"] = "Origin,Content-Type,Cookie,Accept,Token,authorization"
    return response


@app.route('/get_name', methods=["POST"])
def get_name():
    """
    生成隨機名
    """
    username = fake.name() + "==" + str(uuid.uuid4())
    return jsonify(username)


@app.route('/send_message', methods=["POST"])
def send_message():
    """
    傳送資訊
    """
    username, tag = request.json.get("username").rsplit("==", maxsplit=1)  # 取出uuid和名字
    message = request.json.get("message")
    time = request.json.get("time")

    dic = {
        "username": username,
        "message": message,
        "time": time,
        "tag": tag + time,  # 前端:key唯一標識
    }

    notes.append(dic)  # 追加聊天記錄

    return jsonify({
        "status": 1,
        "error": "",
        "message": "",
    })


@app.route('/get_all_message', methods=["POST"])
def get_all_message():
    """
    獲取聊天記錄
    """
    global notes
    if len(notes) == 100:
        notes = notes[90:101]
    return jsonify(notes)


if __name__ == '__main__':
    app.run(threaded=True)  # 開啟多執行緒

　　前端程式碼main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios"
import moment from 'moment'

Vue.prototype.$moment = moment
moment.locale('zh-cn')
Vue.prototype.$axios = axios;


Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

　　前端程式碼Home.vue：

<template>
  <div class="index">

    <div>{{ title }}</div>
    <article id="context">
      <ul>
        <li v-for="(v,index) in all_message" :key="index">
          <p>{{ v.username }}&nbsp;{{ v.time }}</p>
          <p>{{ v.message }}</p>
        </li>
      </ul>
    </article>
    <textarea v-model.trim="message" @keyup.enter="send"></textarea>
    <button type="button" @click="send">提交</button>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      BASE_URL: "http://127.0.0.1:5000/",
      title: "聊天交流群",
      username: "",
      message: "",
      all_message: [],
    }
  },
  mounted() {
    // 獲取使用者名稱
    this.get_user_name();
    // 輪詢，獲取資訊
    setInterval(this.get_all_message, 3000);
  },
  methods: {
    // 獲取使用者名稱
    get_user_name() {
      this.$axios({
        method: "POST",
        url: this.BASE_URL + "get_name",
        responseType: "json",
      }).then(response => {
        this.username = response.data;

      })
    },
    // 傳送訊息
    send() {
      if (this.message) {
        this.$axios({
          method: "POST",
          url: this.BASE_URL + "send_message",
          data: {
            message: this.message,
            username: this.username,
            time: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
          },
          responseType: "json",
        });
        this.message = "";
      }
    },
    // 輪詢獲取訊息
    get_all_message() {
      this.$axios({
        method: "POST",
        url: this.BASE_URL + "get_all_message",
        responseType: "json",
      }).then(response => {
        this.all_message = response.data;
        // 使用巨集佇列任務，拉滾動條
        let context = document.querySelector("#context");
          setTimeout(() => {
            context.scrollTop = context.scrollHeight;
          },)

      })
    },
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

.index {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}

.index div:first-child {
  margin: 0 auto;
  background: rebeccapurple;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: aliceblue;
  width: 80%;
}

.index article {
  margin: 0 auto;
  height: 300px;
  border: 1px solid #ddd;
  overflow: auto;
  width: 80%;
  font-size: .9rem;
}

.index article ul li {
  margin-bottom: 10px;
}

.index article ul li p:last-of-type {
  text-indent: 1rem;
}

.index textarea {
  outline: none;
  resize: none;
  width: 80%;
  height: 100px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.index button {
  width: 10%;
  height: 30px;
  align-self: flex-end;
  transform: translate(-100%);
  background: forestgreen;
  color: white;
  outline: none;
}
</style>

長輪詢

基本概念

　　輪詢是不斷的傳送請求，Server端顯然受不了。

　　這時候就可以使用長輪詢的機制，即為每一個進入聊天室的使用者（與Server端建立連線的使用者）建立一個佇列，每個使用者輪詢時都去詢問自己的佇列，如果沒有新訊息就等待，如果後端一旦接收到新訊息就將訊息放入所有的等待佇列中返回本次請求。

　　長輪詢是在輪詢基礎上做的，也是不斷的訪問伺服器，但是伺服器不會即刻返回，而是等有新訊息到來時再返回，或者等到超時時間到了再返回。

Server端採用佇列，為每一個請求建立一個專屬佇列

Server端有新訊息進來，放入每一個請求的佇列中進行返回，或者等待超時時間結束捕獲異常後再返回

示例演示

　　使用長輪詢實現聊天室是最佳的解決方案。

　　前端頁面開啟後的流程依舊是生成隨機名字，後端立馬為這個隨機名字拼接上uuid後建立一個專屬的佇列。

　　然後每次傳送訊息時都將訊息裝到每個使用者的佇列中，如果有佇列訊息大於1的說明該使用者已經下線，將該佇列刪除即可。

　　獲取最新訊息的時候就從自己的佇列中獲取，獲取不到就阻塞，獲取到就立刻返回。

　　後端程式碼：

import queue
import uuid

from faker import Faker
from flask import Flask, request, jsonify

fake = Faker(locale='zh_CN')  # 生成隨機名
app = Flask(__name__)

notes = []  # 儲存聊天記錄，100條

# 使用者訊息佇列
user_queue = {

}

# 已下線使用者
out_user = []


@app.after_request  # 解決CORS跨域請求
def cors(response):
    response.headers['Access-Control-Allow-Origin'] = "*"
    if request.method == "OPTIONS":
        response.headers["Access-Control-Allow-Headers"] = "Origin,Content-Type,Cookie,Accept,Token,authorization"
    return response


@app.route('/get_name', methods=["POST"])
def get_name():
    """
    生成隨機名，還有管道
    """
    username = fake.name() + "==" + str(uuid.uuid4())
    q = queue.Queue()
    user_queue[username] = q  # 建立管道 {使用者名稱+uuid:佇列}
    return jsonify(username)


@app.route('/send_message', methods=["POST"])
def send_message():
    """
    傳送資訊
    """
    username, tag = request.json.get("username").rsplit("==", maxsplit=1)  # 取出uuid和名字
    message = request.json.get("message")
    time = request.json.get("time")

    dic = {
        "username": username,
        "message": message,
        "time": time,
    }

    for username, q in user_queue.items():
        if q.qsize() > 1:  # 使用者已下線,五條阻塞資訊，加入下線的使用者列表中
            out_user.append(username)  # 不能迴圈字典的時候彈出元素
        else:
            q.put(dic)  # 將最新的訊息放入管道中

    if out_user:
        for username in out_user:
            user_queue.pop(username)
            out_user.remove(username)
            print(username + "已下線，彈出訊息通道")

    notes.append(dic)  # 追加聊天記錄

    return jsonify({
        "status": 1,
        "error": "",
        "message": "",
    })


@app.route('/get_all_message', methods=["POST"])
def get_all_message():
    """
    獲取聊天記錄
    """
    global notes
    if len(notes) == 100:
        notes = notes[90:101]
    return jsonify(notes)


@app.route('/get_new_message', methods=["POST"])
def get_new_message():
    """
    獲取最新的訊息
    """
    username = request.json.get("username")
    q = user_queue[username]
    try:
        # 獲取不到就阻塞,不立即返回
        new_message_dic = q.get(timeout=30)
    except queue.Empty:
        return jsonify({
            "status": 0,
            "error": "沒有新訊息",
            "message": "",
        })
    return jsonify({
        "status": 1,
        "error": "",
        "message": new_message_dic
    })


if __name__ == '__main__':
    app.run()

　　前端程式碼main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios"
import moment from 'moment'

Vue.prototype.$moment = moment
moment.locale('zh-cn')
Vue.prototype.$axios = axios;

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

　　前端程式碼Home.vue：

<template>
  <div class="index">

    <div>{{ title }}</div>
    <article id="context">
      <ul>
        <li v-for="(v,index) in all_message" :key="index">
          <p>{{ v.username }}&nbsp;{{ v.time }}</p>
          <p>{{ v.message }}</p>
        </li>
      </ul>
    </article>
    <textarea v-model.trim="message" @keyup.enter="send" :readonly="status"></textarea>
    <button type="button" @click="send">提交</button>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      BASE_URL: "http://127.0.0.1:5000/",
      title: "聊天交流群",
      username: "",
      message: "",
      status: false,
      all_message: [],
    }
  },
  mounted() {
    // 獲取使用者名稱
    this.get_user_name();

    // 非同步佇列，確認使用者名稱已獲取到
    setTimeout(() => {
      // 載入聊天記錄
      this.get_all_message();
      // 長輪詢
      this.get_new_message();

    }, 1000)

  },
  methods: {
    // 獲取使用者名稱
    get_user_name() {
      this.$axios({
        method: "POST",
        url: this.BASE_URL + "get_name",
        responseType: "json",
      }).then(response => {
        this.username = response.data;
      })
    },
    // 傳送訊息
    send() {
      if (this.message) {
        this.$axios({
          method: "POST",
          url: this.BASE_URL + "send_message",
          data: {
            message: this.message,
            username: this.username,
            time: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
          },
          responseType: "json",
        });

        this.message = "";
      }
    },
    // 頁面開啟後，第一次載入聊天記錄
    get_all_message() {
      this.$axios({
        method: "POST",
        url: this.BASE_URL + "get_all_message",
        responseType: "json",
      }).then(response => {
        this.all_message = response.data;
        // 控制滾動條
        let context = document.querySelector("#context");
        setTimeout(() => {
          context.scrollTop = context.scrollHeight;
        },)
      })
    },
    get_new_message() {
      this.$axios({
        method: "POST",
        // 傳送使用者名稱
        data: {"username": this.username},
        url: this.BASE_URL + "get_new_message",
        responseType: "json",
      }).then(response => {
        if (response.data.status === 1) {
          // 新增新訊息
          this.all_message.push(response.data.message);
          // 控制滾動條
          let context = document.querySelector("#context");
          setTimeout(() => {
            context.scrollTop = context.scrollHeight;
          },)

        }
        // 遞迴
        this.get_new_message();
      })
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

.index {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}

.index div:first-child {
  margin: 0 auto;
  background: rebeccapurple;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: aliceblue;
  width: 80%;
}

.index article {
  margin: 0 auto;
  height: 300px;
  border: 1px solid #ddd;
  overflow: auto;
  width: 80%;
  font-size: .9rem;
}

.index article ul li {
  margin-bottom: 10px;
}

.index article ul li p:last-of-type {
  text-indent: 1rem;
}

.index textarea {
  outline: none;
  resize: none;
  width: 80%;
  height: 100px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.index button {
  width: 10%;
  height: 30px;
  align-self: flex-end;
  transform: translate(-100%);
  background: forestgreen;
  color: white;
  outline: none;
}
</style>

使用輪詢&長輪詢實現網頁聊天室

前言　　如果有一個需求，讓你構建一個網路的聊天室，你會怎麼解決？　　首先，對於HTTP請求來說，Server端總是處於被動的一方，即只能由Browser傳送請求，Server才能夠被動迴應。　　也就是說，如果Browser沒有傳送請求，則Server就不能迴應。　　並且HTTP具有無狀態的特點

html5 websocket + node.js 實現網頁聊天室

1 client: socket.io server: node.js + express + socket.io 一個簡單的聊天室 demo，沒有註冊，內建了一些測試使用者

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

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

輪詢和長輪詢優缺點分析

無法自動頻繁 pre 安裝定時返回 http協議維護 book 輪詢和長輪詢優缺點分析輪詢：客戶端定時向服務器發送Ajax請求，服務器接到請求後馬上返回響應信息並關閉連接。優點：後端程序編寫比較容易。缺點：請求中有大半是無用，浪費帶寬和服務器資源。實例：適

輪詢和長輪詢

AC 服務 ajax 情況下 ace 定時客戶 ebo 小型輪詢：客戶端定時向服務器發送Ajax請求，服務器接到請求後馬上返回響應信息並關閉連接。優點：後端程序編寫比較容易。缺點：請求中有大半是無用，浪費帶寬和服務器資源。實例：適於小型應用。長輪詢：客戶端向

輪詢與長輪詢

java 內嵌客戶 http協議 ash facebook book 定時服務器輪詢與長輪詢輪詢：客戶端定時向服務器發送Ajax請求，服務器接到請求後馬上返回響應信息並關閉連接。優點：後端程序編寫比較容易。缺點：請求中有大半是無用，浪費帶寬和服務器資源。實例：適

輪詢、長輪詢、長連接、socket連接、WebSocket

解決無法自動客戶端瀏覽器主動本質情況下服務器維護 ica 存在輪詢：客戶端定時向服務器發送Ajax請求，服務器接到請求後馬上返回響應信息並關閉連接。　　優點：後端程序編寫比較容易。　　缺點：請求中有大半是無用，浪費帶寬和服務器資源。（而每一次的 HTTP 請求

輪詢、長輪詢、長連接的區別

art 客戶端請求一段的區別 https 長連接 mqtt http 服務一、http長連接 https://www.cnblogs.com/gotodsp/p/6366163.html 二、輪詢客戶端每隔一段時間ajax https://blog.csdn.n

tcp長連線，短連線，http短輪詢，長輪詢

短連線和長連線：長輪詢和短輪詢所謂輪詢，即是在一個迴圈週期內不斷髮起請求來得到資料的機制。只要有請求的地方，都可以實現輪詢，譬如各種事件驅動模型。它的長短是在於請求的返回週期。短輪詢短輪詢指的是在迴圈週期內，不斷髮起請求，每一次請求都立即

談談HTTP協議中的短輪詢、長輪詢、長連線和短連線

--------------------- 作者：左瀟龍來源：CSDN 原文：https://blog.csdn.net/zuoxiaolong8810/article/details/65441709 版權宣告：本文為博主原創文章，轉載請附上博文連結！

輪詢、長輪詢和websocket

取數 rec bre 自己 udp server 查看持久性 div 一、輪詢在一些需要進行實時查詢的場景下應用比如投票系統：　　大家一起在一個頁面上投票　　在不刷新頁面的情況下，實時查看投票結果 1、後端代碼 from flask import F

Ajax輪詢,Ajax長輪詢和websocket(詳細使用)

1.三者介紹【1】http協議介紹 1）介紹：http協議是請求/響應正規化的，每個http 響應都對應一個 http 請求，http協議是無狀態的，多個http請求之間是沒有關係的； 2）http協議的被動性：在標準的HTTP請求響應語義中，瀏覽器發起請求，伺服

關於輪詢與長輪詢的分享

一、輪詢　　1、輪詢（Polling）是一種CPU決策如何提供周邊裝置服務的方式，又稱“程控輸入輸出”（Programmed I/O）。輪詢法的概念是：由CPU定時發出詢問，依序詢問每一個周邊裝置是否需要其服務，有即給予服務，服務結束後再問下一個周邊，接著不斷周而復始。　　2、

SSH 項目中使用websocket 實現網頁聊天功能

發送 ref asi action 監聽器 remote static scrollto 連接參考文章 :java使用websocket，並且獲取HttpSession，源碼分析 http://www.cnblogs.com/zhuxiaojie/p/623882

SSM框架+WebSocket實現網頁聊天（Spring+SpringMVC+MyBatis+WebSocket）

建站不止於增刪改查，還有很多很有魅力的地方。對於通訊聊天這塊已經青睞好久了，前段時間在做的j2ee專案運用到Spring+SpringMVC+MyBatis的框架集合，是關於一個社交平臺的網站，類似於facebook，twitter，微博等。在做完基本的CURD（例如評論模組

HTML,CSS,JS實現網頁聊天視窗

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me

Python實現文字聊天室

跟著 tro 通過客戶端發送 cnblogs ima 命令圖形你是否想過用所學的Python開發一個圖形界面的聊天室程序啊？像這樣的：如果你想開發這樣一個有點懷舊風格的聊天程序，那麽可以接著看；要開發這個聊天程序，你需要具備以下知識點： asyncore

Python實現web聊天室

支持 put all rem message one utf cti 訪問使用Python模塊中的select模塊實現web聊天室功能select模塊Python中的select模塊專註於I/O多路復用，提供了select poll epoll三個方法(其中後兩個在L

實現簡易聊天室（一）

ima log body .com 麻煩導入定義右鍵正常預備工作：（1）讀取文件的時候可能會遇到多個文件一起傳，可以用線程池。（2）發送不同類型的請求時，如發送的是聊天信息，發送的是文件，發送的是好友上線請求等，但對於接受者來說都是字節流無法分別，這就需要我們

網頁聊天室發送表情包

media auth bsp end border chrom 操作 sign 圖片前言本示例使用的是eclipse，其他編輯器也一樣。將資源放到相應目錄即可。使用的都是html/css/js等，所以後端使用什麽語言都沒有關系 1.layui的富文本編輯器發送

使用輪詢&長輪詢實現網頁聊天室

前言

輪詢

基本概念

示例演示

長輪詢

基本概念

示例演示

相關推薦