flask与vue实现通过websocket通信

news2024/11/17 17:36:00

在一些情况下，我们需要实现前后端之间的时刻监听，本文是一篇工具文档，用于解决前后端之间使用websocket交互。

一. Flask的相关配置

1. 下载相关依赖库

如果还没有配置flask的话，需要先安装flask,同时为解决跨域问题，需要安装cors，解决前后端交互，使用socket。

pip install flask

pip install Flask Flask-SocketIO Flask-CORS

2. 后端代码

（1）引入依赖

from flask import Flask
from flask_socketio import SocketIO, emit
from flask_cors import CORS

（2）创建flask示例

app = Flask(__name__)

（3）解决跨域

CORS(app)

（4）引入socket交互

socketio = SocketIO(app, cors_allowed_origins="*")

（5）前后交互

@socketio.on('send_message')
def handle_message(message):  # 其中的message是前端传过来的
    print('Received message: ' + message)  # 打印前端传来的信息
    response = 'Server received: ' + message  # 字符串拼接
    emit('message', response)  # 接收到之后，返回response字符串给前端，作为回应

（6）启动

因为引入了websocket，并且要避免环境不安全，要额外添加参数

if __name__ == '__main__':
    socketio.run(app, debug=True, allow_unsafe_werkzeug=True)

整体代码

from flask import Flask
from flask_socketio import SocketIO, emit
from flask_cors import CORS

app = Flask(__name__)
CORS(app)
socketio = SocketIO(app, cors_allowed_origins="*")


@socketio.on('send_message')
def handle_message(message):  # 其中的message是前端传过来的
    print('Received message: ' + message)  # 打印前端传来的信息
    response = 'Server received: ' + message  # 字符串拼接
    emit('message', response)  # 接收到之后，返回response字符串给前端，作为回应


if __name__ == '__main__':
    socketio.run(app, debug=True, allow_unsafe_werkzeug=True)

二. vue前端配置

1. 引入模块

npm install socket.io-client

2.页面代码

<template>
  <div>
    <div style="top: 300px;position: absolute;left: 350px;">
      <input  type="text" v-model="message" placeholder="Enter your message">
      <button @click="sendMessage">Send Message</button>
    </div>
    <div v-if="receivedMessage">
      <p>Received: {{ receivedMessage }}</p>
    </div>
  </div>
</template>

3.主要方法

methods: {
    sendMessage() {
      if (this.message) {
        this.socket.emit('send_message', this.message);
        this.message = '';  // 清空输入框
      }
    }
  }

4.前端全部代码

<template>
  <div>
    <div style="top: 300px;position: absolute;left: 350px;">
      <input  type="text" v-model="message" placeholder="Enter your message">
      <button @click="sendMessage">Send Message</button>
    </div>
    <div v-if="receivedMessage">
      <p>Received: {{ receivedMessage }}</p>
    </div>
  </div>
</template>

<script>
import io from 'socket.io-client';

export default {
  data() {
    return {
      file: null,
      currentFrame: null,  // 存储当前帧的数据URL
      socket: null,
      message: '',  // 用户输入的消息
      receivedMessage: ''  // 接收到的消息
    }
  },
  mounted() {
    this.socket = io('http://localhost:5000');
    this.socket.on('video_frame', (frame) => {
      this.currentFrame = 'data:image/jpeg;base64,' + btoa(new Uint8Array(frame).reduce((data, byte) => data + String.fromCharCode(byte), ''));
    });
    this.socket.on('message', (msg) => {
      this.receivedMessage = msg;
      console.log(this.receivedMessage);
    });
  },
  methods: {
    sendMessage() {
      if (this.message) {
        this.socket.emit('send_message', this.message);
        this.message = '';  // 清空输入框
      }
    }
  }
}
</script>

三. 演示

1. 前端输入信息并发送

2.后端会接收到输入信息

3.后端接收到信息并作为回应返回给前端，控制台打印信息

四. 使用websocket的优势

websocket的优势

---------------------------------------------------------------------------------------------------------------------------------

实时双向通信：
- WebSocket：允许服务器和客户端之间进行实时的双向通信。这意味着一旦连接建立，服务器可以主动向客户端推送数据，而不需要客户端请求。这对于需要实时更新的应用（如聊天应用、实时游戏、股票行情、在线协作工具等）特别有用。
- 前后端接口（REST API）：主要采用HTTP协议的请求-响应模型，客户端需要定期发送请求来获取最新的数据（轮询），这会增加网络开销和延迟。
减少网络开销：
- WebSocket：在建立连接后，数据交换是通过单一的TCP连接进行的，没有HTTP请求头的额外开销，这使得通信更为高效。
- 前后端接口（REST API）：每次请求都包含完整的HTTP请求头信息，会增加额外的网络开销，尤其是在频繁请求的情况下。
延迟更低：
- WebSocket：由于是持久连接，数据传输的延迟较低，适合对延迟敏感的应用。
- 前后端接口（REST API）：每次数据传输都需要建立新的连接，导致较高的延迟，且轮询方式会增加延迟。
服务器推送能力：
- WebSocket：服务器可以随时向客户端推送数据，而无需客户端主动请求，适用于需要服务器主动通知客户端的场景。
- 前后端接口（REST API）：一般是客户端发起请求，服务器响应。虽然可以通过长轮询实现类似的效果，但效率较低且实现复杂。
连接状态管理：
- WebSocket：连接状态由客户端和服务器共同管理，连接状态明确，一旦断开需要重连。
- 前后端接口（REST API）：每次请求都是独立的，无需维护连接状态，适合一些无状态的服务。

---------------------------------------------------------------------------------------------------------------------------------

使用场景对比

WebSocket 适用场景：
- 实时通信应用（如即时聊天、在线游戏）。
- 实时数据更新（如股票行情、体育赛事直播）。
- 实时协作工具（如在线文档编辑、实时白板）。
前后端接口（REST API）适用场景：
- 传统的CRUD应用（如博客、电子商务网站）。
- 无需实时更新的数据交互。
- 需要无状态通信的服务。

---------------------------------------------------------------------------------------------------------------------------------