flask与vue实现通过websocket通信

一、WebScoket介绍

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

实时双向通信

服务器可以主动向客户端推送消息

客户端也可以随时向服务器发送消息

典型的例子：聊天应用、实时通知、股票行情
低延迟通信

建立连接后，数据传输几乎无延迟

避免了 HTTP 的频繁连接建立和断开

每个消息只有很小的帧头开销（2-14字节）

3.、持久连接

一握手，长期保持连接

不像 HTTP 每次请求都要重新建立连接

二、Flask的相关配置

1、下载相关依赖库

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

java 复制代码

pip install flask

java 复制代码

pip install Flask Flask-SocketIO Flask-CORS

按照如下创建flask项目：

2、后端代码

（1）引入依赖

java 复制代码

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

（2）、创建flask实例

java 复制代码

app = Flask(__name__)

（3）、解决跨域

java 复制代码

CORS(app, resources={r"/*": {"origins": "*"}})

（4）、引入socket交互

java 复制代码

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

（6）、后端代码webscoket

python 复制代码

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

python 复制代码

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

python 复制代码

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

（7）、启动项目

html 复制代码

if __name__ == '__main__':

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

三、前端代码

1. 引入模块

html 复制代码

npm install socket.io-client

2.页面代码

html 复制代码

<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代码

html 复制代码

    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)
      })
    }

html 复制代码

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 则更为合适。

flask与vue实现通过websocket通信

目录

一、WebScoket介绍

二、Flask的相关配置

1、下载相关依赖库

2、后端代码

（1）引入依赖

（2）、创建flask实例

（3）、解决跨域

（4）、引入socket交互

（6）、后端代码webscoket

（7）、启动项目

三、前端代码

1. 引入模块

2.页面代码

3.前端Vue代码

四、演示

五、WebScoket优势

1.优势

2.总结