flask与vue实现通过websocket通信 - 指南

目录

• 一、WebScoket介绍
• 二、Flask的相关配置
• • 1、下载相关依赖库
  • 2、后端代码
  • • （1）引入依赖
    • （2）、创建flask实例
    • （3）、解决跨域
    • （4）、引入socket交互
    • （6）、后端代码webscoket
    • （7）、启动项目
• 三、前端代码
• • 1. 引入模块
  • 2.页面代码
  • 3.前端Vue代码
• 四、演示
• 五、WebScoket优势
• • 1.优势
  • 2.总结

一、WebScoket介绍

WebSocket 是一种网络通信协议，它在单个 TCP 连接上提供全双工通信。与 HTTP 这种请求-响应模式的协议相比，WebSocket 的主要作用和优势包括：
主要作用

1. 实时双向通信
   服务器可以主动向客户端推送消息
   客户端也可以随时向服务器发送消息
   典型的例子：聊天应用、实时通知、股票行情

2. 低延迟通信
   建立连接后，数据传输几乎无延迟
   避免了 HTTP 的频繁连接建立和断开
   每个消息只有很小的帧头开销（2-14字节）

3.、 持久连接
一握手，长期保持连接
不像 HTTP 每次请求都要重新建立连接

二、Flask的相关配置

1、下载相关依赖库

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

pip install flask

pip install Flask Flask-SocketIO Flask-CORS

按照如下创建flask项目：

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, resources={r"/*": {"origins": "*"}})

（4）、引入socket交互

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

（6）、后端代码webscoket

# WebSocket事件处理
@socketio.on('connect')
def handle_connect():
logger.info(f"客户端连接: {request.sid}")
print("测试链接---------------------------------------")
emit('connected', {'message': '连接成功'})

@socketio.on('disconnect')
def handle_disconnect():
logger.info(f"客户端断开连接: {request.sid}")

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

（7）、启动项目

if __name__ == '__main__':
    socketio.run(
        app,
        host='0.0.0.0',
        port=5000,
        debug=True,
        use_reloader=False,
        log_output=True
    )

三、前端代码

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.前端Vue代码

    initWebSocket() {
      this.socket = io('http://localhost:5000', {
        transports: ['polling'],
        reconnection: true,
        reconnectionAttempts: 10,
        reconnectionDelay: 1000,
        forceNew: true,
        polling: {
          extraHeaders: {
            'X-Requested-With': 'XMLHttpRequest'
          }
        }
      })
      this.socket.on('connect', () => {
        console.log('WebSocket连接成功')
        this.wsConnected = true
        this.$message.success('实时连接已建立')
      })
      this.socket.on('disconnect', () => {
        console.log('WebSocket断开连接')
        this.wsConnected = false
        this.$message.warning('实时连接已断开')
      })
      this.socket.on('connected', (data) => {
        console.log('服务器连接确认:', data)
      })
    }

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

四、演示

1、前端发送消息

2、查看后端接受的信息

3、查看浏览器中的信息

五、WebScoket优势

1.优势

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

2.总结

WebSocket 和 REST API 各有优缺点，具体使用哪种方式取决于应用的需求。对于需要实时、低延迟和双向通信的应用，WebSocket 是更好的选择。而对于传统的、无状态的数据交互，REST API 则更为合适。