WebSocket 实现链接群聊(low low low 版本)

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>

WebSocket 实现链接 群聊(low low low 版本)

WebSocket 实现链接群聊(low low low 版本)