資訊專欄INFORMATION COLUMN
摘要：我們要做一個網(wǎng)頁版的聊天室，當(dāng)一個人發(fā)送了消息時，其他人怎么能看到這條信息呢有一個做法就是在網(wǎng)頁中不斷的運(yùn)行，發(fā)送給服務(wù)器，服務(wù)器不斷返回，當(dāng)有新的消息時顯示在頁面上。這樣做毫無疑問會產(chǎn)生大量的連接，對服務(wù)器的性能和帶寬都有影響。
http協(xié)議，是客戶端每發(fā)送一個request，服務(wù)器返回一個response，無法做到服務(wù)器主動向客戶端發(fā)送數(shù)據(jù)。我們要做一個網(wǎng)頁版的聊天室，當(dāng)一個人發(fā)送了消息時，其他人怎么能看到這條信息呢？有一個做法就是在網(wǎng)頁中不斷的運(yùn)行js，發(fā)送request給服務(wù)器，服務(wù)器不斷返回response，當(dāng)有新的消息時顯示在頁面上。這樣做毫無疑問會產(chǎn)生大量的http連接，對服務(wù)器的性能和帶寬都有影響。而websocket協(xié)議可以做到由服務(wù)器主動向客戶端發(fā)送數(shù)據(jù)，當(dāng)有新消息時就主動發(fā)送給瀏覽器，瀏覽器將內(nèi)容更新到頁面上。更多關(guān)于這個協(xié)議的詳細(xì)內(nèi)容和介紹，可以網(wǎng)上自行搜索。
為了學(xué)習(xí)websocket，我們來實(shí)現(xiàn)一個超級簡單的網(wǎng)頁聊天室，建立一個html文件，頁面顯示效果如下，用一個大的div框架用來顯示聊天記錄，一個input輸入內(nèi)容，一個button用于發(fā)送信息：
前端使用js的socket.io，代碼如下：
上段代碼首先使用cdn引用socket.io.min.js，然后與后端建立連接，接著定義了一個send方法（在html的button中使用onclikc綁定），該方法首先獲取input中的內(nèi)容，然后使用emit方法將其發(fā)送到后端，后端(python+Flask-SocketIO)對應(yīng)的代碼是：
from flask import Flask, render_template
from flask_socketio import SocketIO
import config
app = Flask(__name__)
app.config.from_object(config)
socketio = SocketIO(app)
@app.route("/")
def index():
return render_template("websocket.html")
@socketio.on("my event")
def handle_my_custom_namespace_event(data):
socketio.emit("res", data)
if __name__ == "__main__":
socketio.run(app)
代碼中使用@socketio.on("my event")注冊一個my event事件（與前端socket.emit("my event", {data: msg})一致），然后再使用socketio.emit("res", data)將數(shù)據(jù)返回前端，前端又通過socket.on("res", callback)進(jìn)行接收，所有建立了webscoket連接的客戶端都會收到。此時整個流程就已經(jīng)很明確了，再梳理一遍就是：點(diǎn)擊button后，觸發(fā)send函數(shù)，獲取到input中的內(nèi)容，然后將數(shù)據(jù)（準(zhǔn)確來說是將攜帶數(shù)據(jù)的事件）發(fā)送給后端，后端對應(yīng)這個事件的函數(shù)（即使用@socketio.on("my event")注冊的函數(shù)，類似路由的注冊）就會執(zhí)行，該后端函數(shù)向前端發(fā)送攜帶同樣數(shù)據(jù)的res事件，前端socket.on("res", callback)收到"req"事件后，使用callback回調(diào)函數(shù)處理（即向網(wǎng)頁中添加內(nèi)容）。
開兩個瀏覽器窗口，就可以看出效果了，如下：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/44542.html
摘要：聊天室的鏈接已經(jīng)失效因?yàn)槲也渴鹆艘粋€新的網(wǎng)站，歡迎大家訪問在搭建簡單的網(wǎng)頁聊天室框架這篇文章中，我們簡單實(shí)現(xiàn)了一個聊天室，我又花了一些時間寫了個稍微復(fù)雜一點(diǎn)點(diǎn)的，大家可以通過進(jìn)入聊天室或訪問。 聊天室的鏈接已經(jīng)失效！因?yàn)槲也渴鹆艘粋€新的網(wǎng)站，歡迎大家訪問mytodo.vip 在websocket搭建簡單的網(wǎng)頁聊天室框架這篇文章中，我們簡單實(shí)現(xiàn)了一個websocket聊天室，我又花了一...
摘要：我們要做一個網(wǎng)頁版的聊天室，當(dāng)一個人發(fā)送了消息時，其他人怎么能看到這條信息呢有一個做法就是在網(wǎng)頁中不斷的運(yùn)行，發(fā)送給服務(wù)器，服務(wù)器不斷返回，當(dāng)有新的消息時顯示在頁面上。這樣做毫無疑問會產(chǎn)生大量的連接，對服務(wù)器的性能和帶寬都有影響。 http協(xié)議，是客戶端每發(fā)送一個request，服務(wù)器返回一個response，無法做到服務(wù)器主動向客戶端發(fā)送數(shù)據(jù)。我們要做一個網(wǎng)頁版的聊天室，當(dāng)一個人發(fā)送...
摘要：因?yàn)橹挥泄芾韱T才能看到所有的聊天記錄，我把驗(yàn)證方式放在了的中，如圖中表示查看最近條聊天記錄，是驗(yàn)證身份，是我設(shè)置的密碼。 聊天室的鏈接已經(jīng)失效！因?yàn)槲也渴鹆艘粋€新的網(wǎng)站，歡迎大家訪問mytodo.vip 作為聊天室http://180.76.50.50/的管理員，我要看到所有的聊天記錄，可以在后臺查找數(shù)據(jù)庫數(shù)據(jù)，但現(xiàn)在這個聊天室的數(shù)據(jù)是放在遠(yuǎn)程linux服務(wù)器的MongoDB中的，登...
摘要：那么，是否就無法用來開發(fā)雙向通信的應(yīng)用呢答案是否定的。內(nèi)置通信支持，可以與程序基于進(jìn)行雙向通信。通信協(xié)議于年被定為標(biāo)準(zhǔn)，并由補(bǔ)充規(guī)范。前言 眾所周知，PHP用于開發(fā)基于HTTP協(xié)議的網(wǎng)站應(yīng)用非常便捷。而HTTP協(xié)議是一種單向的通信協(xié)議，只能接收客戶端的請求，然后響應(yīng)請求，不能主動向客戶端推送信息。因此，一些實(shí)時性要求比較高的應(yīng)用，如實(shí)時聊天、直播應(yīng)用、在線網(wǎng)頁游戲等，就不適合采用HTTP協(xié)議...
閱讀 2517·2021-11-11 16:54
閱讀 2728·2021-09-26 09:47
閱讀 4058·2021-09-08 09:36
閱讀 2816·2021-07-25 21:37
閱讀 978·2019-08-30 15:54
閱讀 2600·2019-08-30 14:22
閱讀 3312·2019-08-30 13:57
閱讀 2832·2019-08-29 17:17
