zoukankan      html  css  js  c++  java
  • 基于flask框架,使用websocket实现多人聊天室功能

    后端代码:

    # web_socket 的收发机制
    # web_socket  -->  web + socket  -->  http协议 + socket
    # web_socket协议就是ws协议
    # 基于flask框架为web_socket提供服务
    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__)  # type: Flask
    
    
    user_socket_list = []
    
    @app.route("/ws")
    def web_sck():
        # print(request.environ)  #  打印的原始请求数据
        # 这个东西其实就是WebSocket的长链接
        user_socket = request.environ.get("wsgi.websocket")   # type: WebSocket
        if user_socket:
            user_socket_list.append(user_socket)
            # print(len(user_socket_list),user_socket_list)
        while 1:
            msg = user_socket.receive()  # 接收客户端传入数据
            # 在浏览器中content的中输入ws ,readyState如果为1 表示连接成功,如果等于3表示,连接成功后又断开了连接,0 表示没有开启
            print(msg)
            for usocket in user_socket_list:
                if user_socket == usocket:
                    continue
                try:
                    usocket.send(msg)
                except:
                    continue
    
    
    @app.route("/")
    def index():
        return render_template("web_sck1.html")
    
    
    if __name__ == "__main__":
        # app.run("0.0.0.0",8000,debug=True)
        http_serve = WSGIServer(("0.0.0.0",8000),app,handler_class=WebSocketHandler)
        http_serve.serve_forever()  # 启动这个web-server请求

    前端代码:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <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="msg_list" style=" 500px">
    
    </div>
    
    
    
    <script type="application/javascript">
        var ws = new WebSocket("ws://192.168.12.38:8000/ws") ; // 指定发送的链接地址
        ws.onopen = function(){  //
            {#ws.send("hello")#}
        };
        // 前端接收消息   ws_info 接收数据的容器
        ws.onmessage = function (ws_info) {
            console.log(ws_info.data);  //后端返回的响应数据,存放在ws_info下的data中
            var ptag = document.createElement("p");  //创建一个p标签
            ptag.innerText = ws_info.data;//将data中的数据存放标签中
            document.getElementById("msg_list").appendChild(ptag)
        };
        
        function send_msg() {
            var msg = document.getElementById("message").value;
            var ptag = document.createElement("p");  //创建一个p标签
            ptag.style.cssText = "text-align: right;";
            ptag.innerText = msg;//将data中的数据存放标签中
            document.getElementById("msg_list").appendChild(ptag)
            ws.send(msg);  // 拿到前端输入的内容,向后端发送
        }
    </script>
    </body>
    </html>
  • 相关阅读:
    git clone 慢,使用镜像
    Mysql 插入 path 插入不进去值
    os.walk 获取文件夹下所有的文件
    Manjaro安装后你需要这样做(仅有网址)
    Mysql 查询优化
    pandas df.to_csv 可保存为 txt 类型 index 设置索引 header 列名 sep 使用什么进行分隔
    pandas pd.to_markdown() 转换为 Markdown pd.to_latex() 转换为 latex
    pandas 读取txt seq分隔符类型 engine指定引擎 header 不将第一行作为列名
    pandas 读取文件时 header设置列名 index_col 设置索引 usecols 读取哪几列 parse_dates 将哪一列设置为时间类型 nrows 读取数据行数
    numpy cumprod 累乘 cumsum 累加 diff 和前一个元素做差值
  • 原文地址:https://www.cnblogs.com/mwhylj/p/10157195.html
Copyright © 2011-2022 走看看