随笔四 : 浅谈Websocket即时通讯的搭建思路及源码

郑统京

--1、后端通过使用GeventWebsocket模块 + Flask 创建websocket服务
--2、接收"连接" websocket socket_dict[username] = socket保持连接
--3、转发消息 msg = sock.receive() rece_sock=socket_dict[rece]  rece_sock.send(msg)
# 导入Gevent  Websocket
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[username]=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

郑统京

上传格式紊乱，重新以图片发出