Flask-websocket实现聊天功能

原生js代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>群聊</title>
</head>
<body>
<p>
    <input type="text" id="content">
    <button onclick="send_msg()">发送</button> <!--给按钮绑定点击事件-->
</p>

<div id="chat_list">

</div>
</body>
<script type="application/javascript">
  var ws = new WebSocket("ws://192.168.16.42:9527/my_socket");
  // 监听后端发来的消息,ws.onmessage起到监听的作用,只要有消息过来函数会自动执行
  ws.onmessage = function (eventMessage) {
      console.log(eventMessage.data); // 获取后端发来的消息
      var p = document.createElement("p");
      p.innerText = eventMessage.data;
      document.getElementById("chat_list").appendChild(p); // 将消息内容添加到div内
  };
  // 将我们输入的内容发送给后端
  function send_msg() {
      var content = document.getElementById("content").value;
      ws.send(content);
  };

</script>
</html>

后端逻辑代码

# -*- coding: utf-8 -*-
# @Time    : 2019/7/15 16:42

from flask import render_template,request,Flask
from geventwebsocket.handler import WebSocketHandler  # 提供WS协议处理
from geventwebsocket.server import WSGIServer # 承载服务
from geventwebsocket.websocket import WebSocket  # 语法提示

app = Flask(__name__)

user_socket_list = []
@app.route("/my_socket")
def my_socket():
    # 获取当前客户端与服务器的Socket连接
    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)
        # 1 [<geventwebsocket.websocket.WebSocket object at 0x000001D0D70E1458>]
        # print(user_socket,"OK 连接已经建立好了，接下来发消息吧")
    while 1:
        # 等待前端将消息发送过来
        msg = user_socket.receive()
        print(msg)

        for usocket in user_socket_list:
            try:
                usocket.send(msg)
            except:
                continue

@app.route("/qunliao")
def gc():
    return render_template("qunliao.html")

if __name__ == '__main__':
    http_serv = WSGIServer(("0.0.0.0",9527),app,handler_class=WebSocketHandler) # 这种启动方式和app.run()不冲突,该启动方式发什么请求都可以接受到
    http_serv.serve_forever()

流程

1、用户在网页请求http://192.168.16.42:9527/qunliao
2、请求/qunliao这个路由走后端对应的视图函数gc返回qunliao.html这个页面,
3、页面在加载的过程中走到script代码时建立WebSocket连接请求ws://192.168.16.42:9527/my_socket,
4、ws://192.168.16.42:9527/my_socket请求走后端对应的视图函数,获取当前客户端与服务器的socket连接对象,调用该对象的receive方法,等待前端发来消息,
5、前端我们通过给input框绑定点击事件,获取用户输入的内容发送给服务器;
6、后端将前端发来的消息在发送给前端；
7、前端通过ws.onmessage这个事件监听着后端过来的消息,只要有消息就会自动触发函数执行并获取数据;

第一步是浏览器向/quliao这个路径发起请求:

Flask-websocket实现聊天功能

jQuery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>群聊</title>
</head>
<body>
<p>
    <input type="text" id="content">
    <button id="send_msg" >发送</button> <!--给按钮绑定点击事件-->
</p>

<div id="chat_list">

</div>
</body>
<script src="/static/jquery-3.4.1.js"></script>
<script type="application/javascript">
    var ws = new WebSocket("ws://192.168.16.42:9527/my_socket");
    // 监听后端发来的消息,ws.onmessage起到监听的作用,只要有消息过来函数会自动执行
    ws.onmessage = function (eventMessage) {
      console.log(eventMessage.data);       // 获取后端发来的消息
      var p = document.createElement("p"); // 创建一个p标签
      p.innerText = eventMessage.data;     // 将后端发来的数据添加到p标签内
      $("#chat_list").append(p)            // 将p标签添加到div内
    };
  // 将我们输入的内容发送给后端
    $("#send_msg").click(function () {
        var content = $("#content").val();
        ws.send(content);
    })
</script>
</html>

前端代码