WebSocket 是 HTML5 出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）

首先HTTP有 1.1 和 1.0 之说，也就是所谓的 keep-alive ，把多个HTTP请求合并为一个，但是 Websocket 其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也就是说它是HTTP协议上的一种补充可以通过这样一张图理解：

flask实现 websocket 的两种方式

第一种是 flask_sockets 方式，该方式是flask对websocket的最原始封装，功能较为单一。

第二种方式 Flask-SocketIO 对 websocket 的封装，该方式所能提供功能较多，不但实现了socket的基本通信功能，也可以结合flask相关接口，使其更加完备，因此网上对该api介绍也较多。

flask_sockets 实现介绍

客户端发送数据实现

服务器端完整代码展示

debug的好处：已经run过的程序，Ctrl+S，保存一下，自动重启，（节省时间，提高效率）

可以分为开发模式，和生产模式；在程序员自己写代码的时候，即 app.run(debug=True)，写完程序，递交项目最终成果时，要将其关闭，即 app.run()

客户端的实现：

socketio 中的 namespace 的概念

如果希望服务端发送的信息在所有客户端都能收到，那么使用默认的namespace / 就好了。但是如果想把发送信息的服务器作为第三方应用给不同客户端使用，就需要为每一个客户端定义一个namespace.

跨域问题的解决方案：

版本不兼容问题：

pip list 查看 服务器端 Flask-SocketIO 版本

通过最近一系列的踩坑之后，总结出了这篇相对较为完善的关于vue-socket.io的使用文章，包含大家困扰的（socket连接、断开重连，以及当连接的地址是动态的情况下，我们应该注意的事项。

如何安装 socket.io

第一种：引用 socket.io，在组件中直接引入

第二种：引用 socket.io，在 main.js 中直接这样写

这里要提示的一点就是，当连接的地址是动态的，代码的执行顺序就很重要了，即 new VueSocket 在main.js中的位置

如何进行建立 socket.io 连接

在 html 中直接实现：

在 Vue 组件 中直接实现：

首先看下四个方法

建立 ws 对象，绑定 onmessage 方法进行接受服务器端传来的数据

BootCDN 稳定、快速、免费的前端开源项目 CDN 加速服务

ImportError 无法导入 ContextVar 包

ImportError: cannot import name ‘ContextVar’

关于 Werkzeug 缺失，或者版本过低问题

2022-04-27T12:31:24Z { REMOTE_ADDR : 127.0.0.1 , REMOTE_PORT : 63825 , HTTP_HOST : 127.0.0.1:8080 , (hidden keys: 30)} failed with WebsocketMismatch

flask 缺少 Werkzeug，或者 Werkzeug 版本不兼容 flask 等问题

flask 2.0.2 requires Werkzeug>=2.0, but you have werkzeug 1.0.1 which is incompatible.

关于客户端的 socket 和 flask 端的 socket 版本不兼容

The client is using an unsupported version of the Socket.IO or Engine.IO protocols (further occurrences of this error will be logged with level INFO)

文章出处登录后可见！

共计人评分，平均分

到目前为止还没有投票！成为第一位评论此文章。