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_template app = Flask(__name__) user_socket_list = [] # 存放所有链接到服务器的 socket @app.route("/ws") def my_websocket_func(): # 获取到websocket链接. user_socket = request.environ.get("wsgi.websocket") # type:WebSocket user_socket_list.append(user_socket) # 每个链接上来的socket都存放到 socket列表中一份 while 1: msg = user_socket.receive() # 通过连接等待接收客户端发送过来的消息 for us in user_socket_list: # if us == user_socket: # 当循环到的socket链接是自己的时候 # continue try: 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=" 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.data var 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>