随笔四 : 浅谈Websocket即时通讯的搭建思路及源码
本帖最后由 郑统京 于 2023-5-26 00:54 编辑--1、后端通过使用GeventWebsocket模块 + Flask 创建websocket服务
--2、接收"连接" websocket socket_dict = socket保持连接
--3、转发消息 msg = sock.receive() rece_sock=socket_dictrece_sock.send(msg)
# 导入GeventWebsocket
from geventwebsocket.websocket import WebSocket# 语法提示
from geventwebsocket.handler import WebSocketHandler# 增加 handler_class websock处理方式
from geventwebsocket.server import WSGIServer# 替换原始的WSGI
# FlaskWeb框架
from flask import Flask, request
app=Flask(__name__)
socket_dict ={}
@app.route("/ws/<username>")
def ws(username):
sock=request.environ.get("wsgi.websocket") # type:WebSocket
if sock:
socket_dict=sock
else:
return "请使用ws"
print(len(socket_dict),socket_dict)
while True:
msg = sock.receive()
print(msg)
msg_dict = json.loads(msg)
receiver = msg_dict.get("receiver")
rece_sock = socket_dict.get(receiver)
rece_sock.send(msg)
if __name__ == '__main__':
# 已经跑了一个正常的服务是9527，这个专门跑ws服务9528
http_serv=WSGIServer(("0.0.0.0",9528),app,handler_class=WebSocketHandler)
http_serv.serve_forever()
--4、App Websocket 客户端创建
1、登陆时创建Websocket客户端 公共的
# login.html页面 给index传入事件创建websocket，因为index页面底部一致都在用，并且频率最高
var index_wv=plus.webview.getWebviewById("HBuilder")
mui.fire(index_wv,'create_ws',{"user_id":data.data._id)
# index.html 接收login传递的create_ws事件 创建websocket,需要在index页面创建websocket，因为所有的页面都在加载index整个底部
var ws =null;
function create_ws(user_id){
var ws_url= "ws://192.168.2.149:9528/ws/"+user_id;
ws = new WebSocket(ws_url);}
2、send_music 事件监听并发送消息 -ws.send()
# player.html播放也页面通过点击websocket给玩具发送音乐
document.getElementById('send_music').addEventListener('tap',function () {
var index = plus.webview.getWebviewById("HBuilder");
mui.fire(index,'send_music',{
// 通过 player_wv 获取到歌曲名
filename : player_wv.music,
receiver : "toy",
})
})
# 接收到来自player页面通过websocket发送音乐事件给websocket服务端转发到玩具
document.addEventListener('send_music',function (eventMessage) {
var send_str = JSON.stringify(eventMessage.detail); // 传递来数据是对象，需要转换成json字符串来发送给websocket通讯
ws.send(send_str)
})
--5、Web Websocket 客户端
1、render页面发送ws协议创建客户端
接收到监听的消息之后
2、转换成object
3、播放内容var serv = "http:127.0.0.1:9527/get_music/"function create_ws(toy_id){
ws=new WebSocket(ws_serv+toy_id)
// 监听消息,send发来数据后做处理
ws.onmessage = function(eventMessage){
// websocket后端传过来的参数是json字符传需要转换成对象操作
var data = JSON.parse(eventMessage.data);
document.getElementById("player").src=serv+ data.filename
上传格式紊乱，重新以图片发出
页:
[1]