py 文件:
"""下载 gevent-websocket 0.10.1基于Flask + geventWebSocket 建立连接,发送消息,实现群消息功能."""from geventwebsocket.server import WSGIServer # 我要WSGI为我提供服务from geventwebsocket.handler import WebSocketHandler # WSGI 遇到 WS 协议的时候,用WebSocketHandler处理from geventwebsocket.websocket import WebSocket # 语法提示,使用方法:"# type:WebSocket"from flask import Flask, request, render_templateapp = Flask(__name__)user_socket_list = [] # 存放所有链接到服务器的 socket@app.route("/ws")def my_websocket_func():# 获取到websocket链接.user_socket = request.environ.get("wsgi.websocket") # type:WebSocketuser_socket_list.append(user_socket) # 每个链接上来的socket都存放到 socket列表中一份while 1:msg = user_socket.receive() # 通过连接等待接收客户端发送过来的消息for us in user_socket_list:# if us == user_socket: # 当循环到的socket链接是自己的时候#continuetry:us.send(msg) # 把接收到的数据在发送回去except:continue@app.route("/group_p")def group_p():return render_template("my_ws_mp.html")if __name__ == '__main__':http_server = WSGIServer(("0.0.0.0", 9527), application=app, handler_class=WebSocketHandler)http_server.serve_forever()
html 文件:
<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="content-Type" charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>群聊</title></head><body><p>发送消息: <input type="text" id="message"><button onclick="send_msg()">发送</button></p><div id="message_list" style="width: 800px"></div><script>var ws = new WebSocket("ws://127.0.0.1:9527/ws");// 定义一个变量 ws,// new一个 WebSocket 对象,// 来发送 ws 协议请求 "ws://127.0.0.1:9527/ws"// 当 ws 收到消息时执行 onmessage// 触发 收到消息 用 onmessage ws.onmessage = function (event) {console.log(event.data);var ptag = document.createElement("p");// 创建一个p标签 ptag.innerText = event.data; // p标签中的内容是 event.datavar divtag = document.getElementById("message_list"); // 找到 message_list 的 div标签 divtag.appendChild(ptag); // 把创建的p标签连同内容一起放到 这个 div 中 };function send_msg() {var msg = document.getElementById("message").value;// 当点击"发送"按钮的时候,拿到要发送的内容 ws.send(msg);// 发送出去 }</script></body></html>
