websocket搭建簡單的網頁聊天室框架

UsherChen 發布于2019-08-22 14:54 / 842人閱讀

摘要：我們要做一個網頁版的聊天室，當一個人發送了消息時，其他人怎么能看到這條信息呢有一個做法就是在網頁中不斷的運行，發送給服務器，服務器不斷返回，當有新的消息時顯示在頁面上。這樣做毫無疑問會產生大量的連接，對服務器的性能和帶寬都有影響。

http協議，是客戶端每發送一個request，服務器返回一個response，無法做到服務器主動向客戶端發送數據。我們要做一個網頁版的聊天室，當一個人發送了消息時，其他人怎么能看到這條信息呢？有一個做法就是在網頁中不斷的運行js，發送request給服務器，服務器不斷返回response，當有新的消息時顯示在頁面上。這樣做毫無疑問會產生大量的http連接，對服務器的性能和帶寬都有影響。而websocket協議可以做到由服務器主動向客戶端發送數據，當有新消息時就主動發送給瀏覽器，瀏覽器將內容更新到頁面上。更多關于這個協議的詳細內容和介紹，可以網上自行搜索。

為了學習websocket，我們來實現一個超級簡單的網頁聊天室，建立一個html文件，頁面顯示效果如下，用一個大的div框架用來顯示聊天記錄，一個input輸入內容，一個button用于發送信息：

前端使用js的socket.io，代碼如下：

上段代碼首先使用cdn引用socket.io.min.js，然后與后端建立連接，接著定義了一個send方法（在html的button中使用onclikc綁定），該方法首先獲取input中的內容，然后使用emit方法將其發送到后端，后端(python+Flask-SocketIO)對應的代碼是：

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)將數據返回前端，前端又通過socket.on("res", callback)進行接收，所有建立了webscoket連接的客戶端都會收到。此時整個流程就已經很明確了，再梳理一遍就是：點擊button后，觸發send函數，獲取到input中的內容，然后將數據（準確來說是將攜帶數據的事件）發送給后端，后端對應這個事件的函數（即使用@socketio.on("my event")注冊的函數，類似路由的注冊）就會執行，該后端函數向前端發送攜帶同樣數據的res事件，前端socket.on("res", callback)收到"req"事件后，使用callback回調函數處理（即向網頁中添加內容）。

開兩個瀏覽器窗口，就可以看出效果了，如下：

GPU云服務器云服務器簡單的php聊天簡單的php聊天系統 php簡單的mvc框架 websocket實現聊天室

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92978.html

websocket搭建簡單的網頁聊天室框架【續1】

摘要：聊天室的鏈接已經失效因為我部署了一個新的網站，歡迎大家訪問在搭建簡單的網頁聊天室框架這篇文章中，我們簡單實現了一個聊天室，我又花了一些時間寫了個稍微復雜一點點的，大家可以通過進入聊天室或訪問。聊天室的鏈接已經失效！因為我部署了一個新的網站，歡迎大家訪問mytodo.vip 在websocket搭建簡單的網頁聊天室框架這篇文章中，我們簡單實現了一個websocket聊天室，我又花了一...

liaoyg8023 2019-07-31 11:03 評論0 收藏0
websocket搭建簡單的網頁聊天室框架

摘要：我們要做一個網頁版的聊天室，當一個人發送了消息時，其他人怎么能看到這條信息呢有一個做法就是在網頁中不斷的運行，發送給服務器，服務器不斷返回，當有新的消息時顯示在頁面上。這樣做毫無疑問會產生大量的連接，對服務器的性能和帶寬都有影響。 http協議，是客戶端每發送一個request，服務器返回一個response，無法做到服務器主動向客戶端發送數據。我們要做一個網頁版的聊天室，當一個人發送...

scq000 2019-07-31 11:02 評論0 收藏0
websocket搭建簡單的網頁聊天室框架【續2】——關于Flask Blueprint

摘要：因為只有管理員才能看到所有的聊天記錄，我把驗證方式放在了的中，如圖中表示查看最近條聊天記錄，是驗證身份，是我設置的密碼。聊天室的鏈接已經失效！因為我部署了一個新的網站，歡迎大家訪問mytodo.vip 作為聊天室http://180.76.50.50/的管理員，我要看到所有的聊天記錄，可以在后臺查找數據庫數據，但現在這個聊天室的數據是放在遠程linux服務器的MongoDB中的，登...

tigerZH 2019-07-31 11:04 評論0 收藏0
php只能做網站？基于swoole+websocket開發雙向通信應用

摘要：那么，是否就無法用來開發雙向通信的應用呢答案是否定的。內置通信支持，可以與程序基于進行雙向通信。通信協議于年被定為標準，并由補充規范。前言眾所周知，PHP用于開發基于HTTP協議的網站應用非常便捷。而HTTP協議是一種單向的通信協議，只能接收客戶端的請求，然后響應請求，不能主動向客戶端推送信息。因此，一些實時性要求比較高的應用，如實時聊天、直播應用、在線網頁游戲等，就不適合采用HTTP協議...

番茄西紅柿 2019-05-23 16:07 評論0 收藏0