郑文峰的博客 郑文峰的博客
首页
  • python之路
  • go之路
  • 其他
  • redis
  • mysql
  • docker
  • k8s
读书破万卷
周刊
关于
  • 导航 (opens new window)
  • 代码片段 (opens new window)
  • 收藏
  • 友链
  • 外部页面

    • 开往 (opens new window)
  • 索引

    • 分类
    • 标签
    • 归档
GitHub (opens new window)

zhengwenfeng

穷则变,变则通,通则久
首页
  • python之路
  • go之路
  • 其他
  • redis
  • mysql
  • docker
  • k8s
读书破万卷
周刊
关于
  • 导航 (opens new window)
  • 代码片段 (opens new window)
  • 收藏
  • 友链
  • 外部页面

    • 开往 (opens new window)
  • 索引

    • 分类
    • 标签
    • 归档
GitHub (opens new window)
  • python

    • 基础

    • 第三方库

    • django

    • flask

      • Flask使用flask_socketio实现websocket
        • 前端实现
        • 后端实现
          • 安装
          • send 和 emit区别
          • 简单使用
          • 基于类的使用
      • flask结合mongo
    • tornado

    • 其他

  • go

  • 其他

  • 编程
  • python
  • flask
zhengwenfeng
2022-08-10
目录

Flask使用flask_socketio实现websocket

# Flask使用flask_socketio实现websocket

下面是案例,是我自己用来测试使用的,可以直接运行的。详细的使用请看官网 (opens new window)

websocket主要应用于客户端和服务端双向通信的。

# 前端实现

使用socket.io.min.js是node.js的一个websocket库,首先创建socket. emit是向后端发送消息, message是该条消息的名称,后面是发送消息的数据。on是注册接受消息的事件,获取后端传过来的数据. namespace是指一类的消息。当连接成功时,会触发connect事件,连接关闭时,触发disconnect事件。


<html>
    <head>
        <script type="text/javascript"
        src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
        <script type="text/javascript"
        src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
        
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                namespace = "/wechat"
                var socket = io.connect('http://' + document.domain + ':' + location.port + namespace);
                
                socket.emit("message", { "data": "zhangsan" })
                
                socket.on('connect', function (data) {
                    socket.emit('message', { 'data': 'I\'m connected!' });
                });
                
                socket.on('disconnect', function(data){
                    socket.emit('message', { 'data': 'I\'m disconnected!' });
                });
                    
                socket.on('response', function (data) {
                    console.log(data.age)
                });
            });
        </script>
    </head>
    
    <body>
        <h1>德玛西亚</h1>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 后端实现

Flask-SocketIO使Flask应用程序可以访问客户端和服务器之间的低延迟双向通信。

# 安装

pip install flask-socketio

# send 和 emit区别

send发送的是无命名的数据,而emit是发送有命名的数据,个人建议是emit

# 简单使用

on是注册接收前端消息的方法,message是指接收的信息的名称,和前端对应。namespace是指一类的消息,和前端对应。emit是指向前端发送消息,对应的消息的名称、数据和namespace。

默认的两个事件,connect和disconnect,当websocket连接成功和失败时,自动触发这两个事件。


from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('index.html')

@socketio.on('message', namespace="/wechat")
def handle_message(message):
    print('received message: ' + message['data'])
    socketio.emit("response", {'age': 18}, namespace="/wechat")

@socketio.on('connect', namespace="/wechat")
def connect():
    print("connect..")

@socketio.on('disconnect', namespace="/wechat")
def connect():
    print("disconnect...")

if __name__ == '__main__':
    socketio.run(app, port=8080)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 基于类的使用

上面都是基于方法使用,个人感觉如果操作较多的情况,比较凌乱,使用类去管理会整齐和方便很多。

服务器收到的任何事件都会被分配到一个名为带有on_前缀的事件名称的方法。

这个案例和上面基于方法是一样的,但是更加方便管理了,每个class管理一个namespace。


class MyCustomNamespace(Namespace):

    def on_connect(self):
        print("连接..")
        
    def on_disconnect(self):
        print("关闭连接")
        
    def on_message(self, data):
        print('received message: ' + data['data'])
        self.emit("response", {'age': 18})
    
socketio.on_namespace(MyCustomNamespace("/wechat"))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#python#flask
上次更新: 2023/01/15, 15:47:48
django rest_framework 分页
flask结合mongo

← django rest_framework 分页 flask结合mongo→

最近更新
01
django rest_framework 分页
03-20
02
学习周刊-第03期-第09周
03-03
03
学习周刊-第02期-第08周
02-24
更多文章>
Theme by Vdoing | Copyright © 2022-2023 zhengwenfeng | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式