2. 程式人生 > >websocket實現群聊和單聊(轉)

websocket實現群聊和單聊(轉)

阿新 • • 發佈：2019-03-04
isp turn ext str 17. 釋放 關閉連接 動態參數 發送信息

昨日內容回顧

技術分享圖片 
1.Flask路由
    1.endpoint="user" # 反向url地址
    2.url_address = url_for("user")
    3.methods = ["GET","POST"] # 允許請求進入視圖函數的方式
    4.redirect_to # 在進入視圖函數之前重定向
    5./index/<nid> # 動態參數路由 <int:nid> def index(nid)
    6.strict_slashes # 是否嚴格要求路由地址 /
    7.defaults={"nid":1} #
 
 def index(nid)

2.Flask初始化配置（實例化）:
    1.template_folder # 指定模板路徑
    2.static_url_path # 指定靜態文件目錄的URL地址
    3.static_folder # 指定靜態文件目錄路徑

3.Flask對象配置
    1.DEBUG #開發模式的調試功能 True False
    2.app.config.from_object(class) # 通過對象的方式導入配置
    3.secret_key # 開啟session功能的時候需要添加的配置

4.Blueprint
    
 
1.將功能和主程序分離，註冊
    2.bl = Blueprint("dongdong",__name__)
    3.註冊 register_blueprint(bl)
    
5.send_file jsonify
    1.send_file # 打開並返回文件 content-type:文件類型
    2.jsonify # 將一個字符串 轉為JSON格式 加入 content-type:application/json 頭
    
6.特殊的裝飾器：
    1.before_request # 在請求進入視圖函數之前執行的函數（登錄認證）
    2.after_request #
 
 在請求響應回瀏覽器之前執行的函數
    3.before_first_request # 在第一次請求進入視圖函數之前執行的函數
    4.errorheader(404) # 當遇到此類錯誤響應的時候(自定義錯誤頁面)

7.flash
    1.flash("msg","tag") # 閃現存儲
    2.get_flashed_messages(category_filter=["tag"]) # 閃現取值
    只要用到了get_flashed_messages就一定清空flash
View Code

轉:https://www.cnblogs.com/xiao987334176/p/9605536.html#autoid-3-5-0

websocket

WebSocket 是什麽？

WebSocket 是一種網絡通信協議。RFC6455 定義了它的通信標準。

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

為什麽需要 WebSocket ？

了解計算機網絡協議的人，應該都知道：HTTP 協議是一種無狀態的、無連接的、單向的應用層協議。它采用了請求/響應模型。通信請求只能由客戶端發起，服務端對請求做出應答處理。

這種通信模型有一個弊端：HTTP 協議無法實現服務器主動向客戶端發起消息。

這種單向請求的特點，註定了如果服務器有連續的狀態變化，客戶端要獲知就非常麻煩。大多數 Web 應用程序將通過頻繁的異步JavaScript和XML（AJAX）請求實現長輪詢。輪詢的效率低，非常浪費資源（因為必須不停連接，或者 HTTP 連接始終打開）。

技術分享圖片

因此，工程師們一直在思考，有沒有更好的方法。WebSocket 就是這樣發明的。WebSocket 連接允許客戶端和服務器之間進行全雙工通信，以便任一方都可以通過建立的連接將數據推送到另一端。WebSocket 只需要建立一次連接，就可以一直保持連接狀態。這相比於輪詢方式的不停建立連接顯然效率要大大提高。

技術分享圖片

WebSocket 如何工作？

Web瀏覽器和服務器都必須實現 WebSockets 協議來建立和維護連接。由於 WebSockets 連接長期存在，與典型的HTTP連接不同，對服務器有重要的影響。

基於多線程或多進程的服務器無法適用於 WebSockets，因為它旨在打開連接，盡可能快地處理請求，然後關閉連接。任何實際的 WebSockets 服務器端實現都需要一個異步服務器。

WebSocket 客戶端

在客戶端，沒有必要為 WebSockets 使用 JavaScript 庫。實現 WebSockets 的 Web 瀏覽器將通過 WebSockets 對象公開所有必需的客戶端功能（主要指支持 Html5 的瀏覽器）。

客戶端 API

以下 API 用於創建 WebSocket 對象。

var Socket = new WebSocket(url, [protocol] );

以上代碼中的第一個參數 url, 指定連接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議。

WebSocket 屬性

以下是 WebSocket 對象的屬性。假定我們使用了以上代碼創建了 Socket 對象：

屬性描述
Socket.readyState 只讀屬性 readyState 表示連接狀態，可以是以下值：0 - 表示連接尚未建立。1 - 表示連接已建立，可以進行通信。2 - 表示連接正在進行關閉。3 - 表示連接已經關閉或者連接不能打開。
Socket.bufferedAmount 只讀屬性 bufferedAmount 已被 send() 放入正在隊列中等待傳輸，但是還沒有發出的 UTF-8 文本字節數。

WebSocket 事件

以下是 WebSocket 對象的相關事件。假定我們使用了以上代碼創建了 Socket 對象：

事件事件處理程序描述
open Socket.onopen 連接建立時觸發
message Socket.onmessage 客戶端接收服務端數據時觸發
error Socket.onerror 通信發生錯誤時觸發
close Socket.onclose 連接關閉時觸發

WebSocket 方法

以下是 WebSocket 對象的相關方法。假定我們使用了以上代碼創建了 Socket 對象：

方法描述
Socket.send() 使用連接發送數據
Socket.close() 關閉連接

示例

技術分享圖片 
// 初始化一個 WebSocket 對象
var ws = new WebSocket("ws://localhost:9998/echo");

// 建立 web socket 連接成功觸發事件
ws.onopen = function () {
  // 使用 send() 方法發送數據
  ws.send("發送數據");
  alert("數據發送中...");
};

// 接收服務端數據時觸發事件
ws.onmessage = function (evt) {
  var received_msg = evt.data;
  alert("數據已接收...");
};

// 斷開 web socket 連接成功觸發事件
ws.onclose = function () {
  alert("連接已關閉...");
};
技術分享圖片

WebSocket 服務端

WebSocket 在服務端的實現非常豐富。Node.js、Java、C++、Python 等多種語言都有自己的解決方案。

以下，介紹我在學習 WebSocket 過程中接觸過的 WebSocket 服務端解決方案。

群聊

項目結構如下：

./
├── chat.py
└── templates
    └── many_people.html

服務器

這裏使用flask作為服務器，python版本為3.6.5

安裝模塊

pip install gevent-websocket

chat.py

技術分享圖片 技術分享圖片 
from flask import Flask,request,render_template
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
from geventwebsocket.websocket import WebSocket
import json


app = Flask(__name__)

user_dict = {}  # 空字典,用來存放用戶名和發送消息

@app.route("/<username>")  # 參數為用戶名
def index(username):
    # 獲取請求的WebSocket對象
    user_socket = request.environ.get("wsgi.websocket") # type:WebSocket
    if user_socket:
        # 設置鍵值對
        # {‘xiao‘: <geventwebsocket.websocket.WebSocket object at 0x0000020F6F6B8DB0>}
        user_dict[username] = user_socket
        print(user_dict)

    # 循環,接收消息
    while True:
        # 接收消息
        msg = user_socket.receive()
        print(msg)
        # 反序列化數據,因為前端發送的是json
        recv_msg = json.loads(msg)
        print(recv_msg)
        # 構造數據結構
        send_msg = {
            # 獲取用戶名
            "username":recv_msg.get("username"),
            # 獲取消息
            "msg":recv_msg.get("msg")
        }
        # 遍歷字典
        for i in user_dict.values():
            # 這裏的i就是websocket對象
            # 判斷websocket對象等於請求的websocket對象
            if i == user_socket:
                # 跳過循環
                continue

            # 發送數據,對數據做序列化
            i.send(json.dumps(send_msg))

@app.route("/ws")
def ws():
    return render_template("many_people.html")

if __name__ == ‘__main__‘:
    # 創建一個WebSocket服務器
    http_serv = WSGIServer(("0.0.0.0",5000),app,handler_class=WebSocketHandler)
    # 開始監聽HTTP請求
    http_serv.serve_forever()
    # app.run("0.0.0.0", 5000, debug=True)
技術分享圖片

客戶端

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
你的昵稱：<input type="text" id="nickname">
<button onclick="connws()">連接服務器</button>
<br><br>
發送消息：<input type="text" id="talk">
<button onclick="send_msg()">發送信息</button><br><br>
<div style="width: 500px;height: 100%;border: 1px red solid;" id="text">

</div>
</body>
<script type="application/javascript">
    var user_name = null;  //用戶名
    var ws = null;  //WebSocket 對象,默認設置為空

    //連接ws
    function connws() {
        //獲取輸入框中的用戶名
        user_name = document.getElementById("nickname").value;
        //創建 WebSocket 對象
        ws = new WebSocket("ws://127.0.0.1:5000/" + user_name);
        //客戶端接收服務端數據時觸發
        ws.onmessage = function (data) {
            // 反序列化接收數據
            var recv_msg = JSON.parse(data.data);
            console.log(recv_msg);
            // 執行自定義函數createDiv,傳入2個參數
            createDiv(recv_msg.username, recv_msg.msg);
        };
    }

    //發送消息
    function send_msg() {
        // 獲取輸入框的發送消息
        var talk = document.getElementById("talk").value;
        // 執行自定義函數createDiv
        createDiv("w", talk);
        // 組件發送數據對象
        send_str = {
            username:user_name,  //用戶名
            msg:talk  //消息
        };
        //使用連接發送數據，序列化對象
        ws.send(JSON.stringify(send_str));
    };

    //顯示聊天信息
    function createDiv(self, content) {
        // 創建div標簽
        var divtag = document.createElement("div");
        //定義格式
        var who = self + " : ";
        // 判斷參數為w時
        if (self == "w") {
            // 替換字符串
            who = "我 : "
        }
        // 修改顯示框的text屬性
        divtag.innerText = who + content;
        // 獲取顯示框
        var text = document.getElementById("text");
        // appendChild() 方法向節點添加最後一個子節點
        // 添加一個div標簽
        text.appendChild(divtag);
    }

</script>
</html>
View Code

啟動flask程序，訪問頁面： http://127.0.0.1:5000/ws

技術分享圖片

開3個網頁，輸入昵稱，開始聊天。註意：每個網頁，連接服務器一次，就可以了！

技術分享圖片

還可以多開幾個網頁，幾個人，可以同時聊天。

單聊

單聊，需要指定一個用戶，才能發起一對一聊天！

項目結構如下：

./
├── one_chat.py
└── templates
    └── single_chat.html

服務器

one_chat.py

技術分享圖片 
from flask import Flask,request,render_template
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
from geventwebsocket.websocket import WebSocket
import json


app = Flask(__name__)

user_dict = {}  # 空字典,用來存放用戶名和發送消息

@app.route("/<username>")  # 參數為用戶名
def index(username):
    # 獲取請求的WebSocket對象
    user_socket = request.environ.get("wsgi.websocket") # type:WebSocket
    if user_socket:
        # 設置鍵值對
        # {‘xiao‘: <geventwebsocket.websocket.WebSocket object at 0x0000020F6F6B8DB0>}
        user_dict[username] = user_socket
        print(user_dict)

    # 循環,接收消息
    while True:
        # 接收消息
        msg = user_socket.receive()
        # print(msg)
        # 反序列化數據,因為前端發送的是json
        recv_msg = json.loads(msg)
        print(recv_msg)
        # 構造數據結構
        send_msg = {
            # 消息
            "msg": recv_msg.get("msg"),
            # 來自於哪個用戶
            "from_user": username,
        }
        # 獲取聊天對象的名字
        to_user = user_dict.get(recv_msg.get("to_user"))
        # 發送數據
        to_user.send(json.dumps(send_msg))

@app.route("/ws")
def ws():
    return render_template("single_chat.html")

if __name__ == ‘__main__‘:
    # 創建一個WebSocket服務器
    http_serv = WSGIServer(("0.0.0.0",5000),app,handler_class=WebSocketHandler)
    # 開始監聽HTTP請求
    http_serv.serve_forever()
    # app.run("0.0.0.0", 5000, debug=True)
View Code

客戶端

single_chat.html

技術分享圖片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
你的昵稱：<input type="text" id="nickname">
<button onclick="connws()">連接服務器</button>
<br>
與誰說話：<input type="text" id="sender">
<br>
發送消息：<input type="text" id="talk">
<button onclick="send_msg()">發送信息</button><br/><br/>
<div style="width: 500px;height: 100%;border: 1px red solid;" id="text">

</div>
</body>
<script type="application/javascript">
    var user_name = null;  //用戶名
    var ws = null;  //WebSocket 對象,默認設置為空

    //連接ws
    function connws() {
        //獲取輸入框中的用戶名
        user_name = document.getElementById("nickname").value;
        //創建 WebSocket 對象
        ws = new WebSocket("ws://127.0.0.1:5000/" + user_name);
        //客戶端接收服務端數據時觸發
        ws.onmessage = function (data) {
            // 反序列化接收數據
            var recv_msg = JSON.parse(data.data);
            console.log(recv_msg);
            // 執行自定義函數createDiv,傳入2個參數
            createDiv(recv_msg.from_user, recv_msg.msg);
        };
    }

    function send_msg() {
        // 獲取輸入框的發送消息
        var talk = document.getElementById("talk").value;
        // 獲取輸入框的聊天對象
        var sender = document.getElementById("sender").value;
        // 執行自定義函數createDiv
        createDiv("w", talk);
        // 構造發送數據對象
        send_str = {
            msg:talk,  //消息
            to_user:sender, //對方
        };
        //使用連接發送數據，序列化對象
        ws.send(JSON.stringify(send_str));
    };

    //顯示聊天信息
    function createDiv(self, content) {
        // 創建div標簽
        var divtag = document.createElement("div");
        //定義格式
        var who = self + " : ";
        // 判斷參數為w時
        if (self == "w") {
            // 替換字符串
            who = "我 : "
        }
        // 修改顯示框的text屬性
        divtag.innerText = who + content;
        // 獲取顯示框
        var text = document.getElementById("text");
        // appendChild() 方法向節點添加最後一個子節點
        // 添加一個div標簽
        text.appendChild(divtag);
    }

</script>
</html>
View Code

效果如下：

技術分享圖片

總結：

技術分享圖片 
1.DButils 數據庫連接池
    創建連接池同時創建連接
    用到連接時從連接池中抽取一個連接
    釋放連接時將連接放回連接池中
    節省與mysql的通訊次數和時長
 
2.Websocket 通訊協議 

 Web + socket
 QQ 即時通訊軟件 97 
 
 初期輪詢：
    QQ 聯眾 軟件不斷的循環訪問服務器問它有沒有給我發送的消息
    優點：響應及時
    缺點：浪費CPU資源，浪費帶寬
 
 長輪詢：
    當客戶端發起詢問，服務器說你等著1分鐘之後，你再來問我
    斷開再次發起連接，服務器幫你輪詢
    優點：響應及時
    缺點：用戶一旦形成規模，服務器消耗是致命的
 
 新的協議 websocket 
    規定了一個數據格式
    收發數據
    該收就收
    該發就發

3.群聊

4.私聊
View Code

websocket實現群聊和單聊(轉)

相關推薦

websocket實現群聊和單聊(轉)

isp turn ext str 17. 釋放 關閉連接 動態參數 發送信息 昨日內容回顧 1.Flask路由 1.endpoint="user" # 反向url地址 2.url_address = url_for("user")

Spring Boot整合websocket實現群聊，點對點聊天,圖片傳送，音訊傳送

參考：基於https://blog.csdn.net/qq_38455201/article/details/80374712  基礎上進行新增圖片傳送和音訊傳送功能   單點圖片傳送： 單點音訊傳送： 音訊傳送相關js參考：https://github.

Netty+Android搭建一個簡易聊天室（實現群聊和私聊）

零，前言 JRBM專案中無論是好友私聊，公開聊天室，還是比賽平臺都需要用到長連線，之前沒有接觸過網路通訊等知識，更別說框架了，因此直接上手netty確實有些困難，在前期主要是在b站上看（https://www.bilibili.com/video/av26415011）這個

使用websocket實現群聊（多個群）

最近一個專案中需要用到一個使用者實時聊天需求：需要很多使用者（在不同的房間）進行實時聊天，也就是一個簡單的聊天室，這裡用的是websocket實現。 這裡需要對每一個連線都指定兩個引數：使用者的userId和所加入的房間id（roomId）； @ServerEndpoin

如何用Javascript實現全選和單選

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document&l

shiro整合redis實現分散式session和單點登入

shiro是一款出色的許可權框架，能夠實現諸如登入校驗、許可權校驗等功能，預設情況下,shir將session儲存到記憶體中，這在應用分散式部署的情況下會出現session不一致的問題，所以我們要將session儲存到第三方，應用始終從第三方獲取session，從而保證分散式

Spring Cloud 安全：整合OAuth2實現身份認證和單點登入

1、概述 Spring Cloud 的安全模組可以為Spring Boot應用提供基於令牌的安全特性。具體講就是支援OAuth2協議來實現單點登入（SSO），可以很方便地在資源服務之間傳遞身份令牌，以及使用嵌入式的ZUUL代理來配置下游服務的認證。 在這篇文

js閉包實現私有變數和單例模式

外界只能通過new f().getPrivateAttr()來訪問變數 function f(){ var privateAttr =10; this.getPrivateAt

spring websocket 和socketjs實現單聊群聊,廣播的消息推送詳解

退出 rec oid -name 返回 classes sockets 們的 tomcat7.0 spring websocket 和socketjs實現單聊群聊,廣播的消息推送詳解 WebSocket簡單介紹 　　隨著互聯網的發展，傳統的HTTP協議已經很難滿足Web應用

flask + websocket實現簡單的單聊和群聊

單聊 from flask import Flask,request,render_template from geventwebsocket.handler import WebSocketHandler from gevent.pywsgi import WSGIServer fr

(3)websocket實現單聊和群聊

2  群聊圖   2.1 zhangsan 發給所有人的圖          2.2 傳送成功後     zhangsan的介面如下  lisi的介面如下 wangwu的介面如下 3 單聊圖  3.1 zhangsan傳送資訊圖如下  3.2傳送成功後  zh

Flask第二天-偏函式、LocalStack、請求上下文、websocket簡介以及實現單聊和群聊功能

    1.偏函式         from functools import partial              

nodejs-websocket 實現單聊和群聊

nodejs-websocket 實現單聊和群聊 下載nodejs-websocket https://github.com/sitegui/nodejs-websocket 最新公司有需求交給我一個任務，研究下關於websocket的即時通訊。寫了一個在上面的基礎上有優化了介面

Android中使用WebSocket實現單聊群聊(即時通訊)

一、建立（使用Java-WebSocket庫）：1.下載java-websocket.jar   2. 在我們專案的lib目錄下新增這個java_websocket.jar包二、使用 ： 其實要實現單聊

從零一起學Spring Boot之LayIM項目長成記（六）單聊群聊的實現

href 宣傳 net 放棄 blog 群聊 項目 get 實現 文章傳送門： 　　https://my.oschina.net/panzi1/blog/1577007 並沒有放棄博客園，只是 t-io 在 oschina發展。用了人家的框架，也得幫人家做做宣傳是吧~~從零

基於netty實現單聊、群聊功能

擴容 單例模式 輔助類 數據包 字節 等等 byte 良好的 解碼 學習資料 https://juejin.im/book/5b4bc28bf265da0f60130116/section/5b6a1a9cf265da0f87595521 收獲： 1. Netty 是什

Swoole實現基於WebSocket的群聊私聊

                     本文屬於入門級文章，大佬們可以繞過啦。如題，本文會實現一個基於Swoole的websocket聊天室（可以群聊，也可以私聊，具體還需要看資料結構的設計）。搭建Swoole環境通過包管理工具# 安裝依賴包$ sudo apt-get install libpcre3 l

websocket實現單聊

server# @File: ws from flask import Flask, request, render_template from geventwebsocket.handler import WebSocketHandler from geventwebsocket.webso

好大一波，波波都大#spring boot websocket單聊+群聊#

【視訊&交流平臺】 http://study.163.com/course/introduction.htm?courseId=1004329008&utm_campaign=commission&utm_source=40000000

如何用WebSocket實現一個簡單的聊天室以及單聊功能

百度百科中這樣定義WebSocket:WebSocket協議是基於TCP的一種新的網路協議。它實現了瀏覽器與伺服器全雙工(full-duplex)通訊——允許伺服器主動傳送資訊給客戶端。簡單的說，WebSocket協議之前，雙工通訊是通過多個http連結來實現，這導致了效率低下,而WebSocket解決了這個