Flask实现简单的群聊和单聊

　　　　Flask是使用python写的一个简单轻量级的框架,今天我们使用Flask实现一个简单的单聊和群聊功能 .

　　　　主要思路 : 前端登录聊天室,聊天室信息包含用户的登录信息,相当于一个登录功能,会把这个信息记录在url中发送给后端,后端会把登录信息作为识别用户的标志,url中的信息会作为key值存在一个字典中:

　　　　{'111': <geventwebsocket.websocket.WebSocket object at 0x000001AB31716118>, '222': <geventwebsocket.websocket.WebSocket object at 0x000001AB317160B0>}

　　　　单聊也是基于这个key值实现的,如果发送的用户为空则默认为群聊;

一.导入相关的包并实例化一个Flask对象

import json

from flask import Flask, request, render_template
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
from geventwebsocket.websocket import WebSocket

app = Flask(__name__)    #实例化一个Flask对象
user_socket_dict = {}    #创建一个空字典

二.后端通过request.environ获取前端的所有信息,其中wsgi.websocket对应的值即用户对象,取出这个对象存入字典 :

@app.route('/ws_app/<user_nick>')     #设置Flask路由,前端通过访问这个地址拆解信息,<user_nick>即前端登录聊天室输入的内容
def ws_app(user_nick):
    user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket    #取出environ中的wsgi.websocket对应的值
    user_socket_dict[user_nick] = user_socket         #以<user_nick>为key在字典中插入用户信息

print(user_socket_dict)     #{'111': <geventwebsocket.websocket.WebSocket object at 0x000001AB31716118>, '222': <geventwebsocket.websocket.WebSocket object at 0x000001AB317160B0>}

三.通过receive取出用户要发送的内容并进行json转换,通过get方法取出to_user(要发送的对象的聊天号),如果没有返回0,后边再通过if判断区别单聊还是群聊:如果to_user存在,说明要发给单个用户,否则是群发.　

    while True:
        msg = user_socket.receive()           #取出发送内容
        
        msg_dict = json.loads(msg)
        to_user = msg_dict.get("to_user",0)   #没有返回0
        if to_user:                           #有发送对象   单聊
            to_user_socket = user_socket_dict.get(to_user)    #用get方法取出
            to_user_socket.send(msg)
        else:                                  #没有发送对象    群聊
            for usocket in list(user_socket_dict.values()):
                usocket.send(msg)
    
    @app.route('/')
    def index():
    　　return render_template('my_ws.html')


if __name__ == '__main__':
    http_serve = WSGIServer(('0.0.0.0', 9527), app, handler_class=WebSocketHandler)
    http_serve.serve_forever()

四.前端代码

 1 <body>
 2 <p><input type="text" id="nick">
 3     <button onclick="login()">登陆聊天室</button>
 4 </p>
 5 发送给：<input type="text" id="to_user">消息：<input type="text" id="send_str">
 6 <button id="send_btn" onclick="send()">发送消息</button>
 7 <p>
 8 <div id="chat_list">
 9 
10 </div>
11 </p>
12 </body>
13 <script type="application/javascript">
14     var ws = null;
15     function login() {
16         var nick = document.getElementById("nick").value;
17         ws = new WebSocket("ws://192.168.***.***:9527/ws_app/" + nick);
18         ws.onmessage = function (messageEvent) {
19             console.log(messageEvent.data);
20             var ptag = document.createElement("p");
21 
22             var message = JSON.parse(messageEvent.data);
23 
24             ptag.innerText = message.from_user + " : " + message.message;
25             document.getElementById("chat_list").appendChild(ptag);
26         };
27     }
28 
29     function send() {
30         var message = document.getElementById("send_str").value;
31         var send_str = {
32             from_user: document.getElementById("nick").value,
33             to_user: document.getElementById("to_user").value,
34             message: message
35         };
36         var json_send_str = JSON.stringify(send_str);
37         ws.send(json_send_str);
38     }
39 </script>

View Code

Flask实现简单的群聊和单聊

猜你喜欢