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