前言 本文旨在记录使用Flask框架过程中与前端Vue对接过程中，存在WebSocket总是连接失败导致前端取不到数据的问题。...核心问题 需要着重注意的是，Flask框架中有原生的Websocket写法，也有对Websocket封装之后的依赖包SocketIO写法，所以在进行与前端对接的过程中，需要与前端对接好接口标准。...以及所有的报错或者各种bug问题，笔者都推测是跟gevent-websocket这个包有关。 在前端更改为vue-socketio之后，成功解决对接失败问题。...Flask-SocketIO则不同，它不仅实现了WebSocket协议，并且对于那些不支持WebSocket协议的旧版浏览器，使用它也能够实现相同的效果。新版旧版的浏览器都能使用他。...1、Flask-SocketIO（封装写法） 使用SocketIO之前需要导入该包，即pip install flask-socketio。也可以直接在代码中import该包中的两个功能。
响应。 “状态行”告诉客户端HTTP状态代码（如果没有问题，通常为200），并提供解释状态代码的简短“原因”文本描述。...要完成握手，请将适当的HTTP响应头写入客户端套接字。...如果它这样做，则服务器需要选择其中一个协议并将其包含在响应头中，否则将使握手失败并终止连接。...请注意，如果客户端请求使用子协议但未提供服务器可以支持的任何内容，则服务器必须发送失败响应并关闭连接。...生成和解析WebSocket消息帧 一旦将握手响应发送到客户端，客户端和服务器就可以使用他们选择的子协议（如果有的话）开始通信。
WebSocket协议 用这个协议最方便的就是，服务器主动向客户端推送信息。客户端也可以主动向服务器发送信息。属于应用层协议，在握手阶段还是使用了HTTP的协议。...在普通的连接过程中，HTTP通过Request请求来界定，一个Request得到一个Response，在HTTP1.0中，这次HTTP请求就已经结束了。...1、安装Websocket 通过命令： pip install flask-socketio pip install websocket-gevent （第二条这条命令部分机子是需要的，有些环境不需要，...一个namespace定义了一个后端的websocket连接接口，客户端和服务器通过三次握手建立socket连接后，连接不同的服务器接口，socket连接并不会断开。...4、使用线程来进行while循环推送消息 在理论上需要定时推送消息的时候，大部分是使用while循环实现的，但是实际上这样容易影响服务端死循环，导致连接出现错误，代码如下： 正确的代码应该是建立一个后端线程
Websocket 简介 WebSocket 是一种基于 TCP 连接的全双工通信的协议，其工作在应用层，建立连接的时候通过复用 Http 握手通道，完成 Http 协议的切换升级，即切换到 WebSocket...在浏览器中发起 ajax 请求, Sec-Websocket-Key 以及相关 header 是被禁止的, 这样可以避免客户端发送 ajax 请求时, 意外请求协议升级。...: OK // 内容类型: text/plain response.writeHead(200, {'Content-Type': 'text/plain'}); // 发送响应数据...当客户端发起协议升级请求时，Websocket 会复用 Http 的握手通道，升级完成后，后续数据交换使用 Websocket。...，可以看到 Websocket 复用了 HTTP 的握手通道, 客户端通过 HTTP 请求与 WebSocket 服务器协商升级协议, 协议升级完成后, 后续的数据交换则遵照 WebSocket协议。
进行握手的请求还是HTTP请求，只是在请求头上多了几个标识表明此请求是WebSocket握手请求： 其中Upgrade:websocket就是表明此请求为WebSocket握手请求。...(HttpVersion.HTTP_1_1, HttpResponseStatus.BAD_REQUEST)); return; } //构造握手响应返回...方法中判断是HTTP握手请求还是WebSocket接入。...（2）如果是HTTP握手请求，则判断是否是WebSocket的握手请求，判断方法是请求头中是否有Upgrade:websocket这个消息，如果是WebSocket握手请求，则构建握手响应返回。...测试 这里推荐使用网上已有的WebSocket测试工具，不推荐自己写前端代码测试，因为麻烦。
7.1.3 已经开始 WebSocket 关闭握手 在发送或者收到了关闭帧时，我们可以说已经开始 WebSocket 关闭握手，并且 WebSocket 连接的状态已经到了“关闭中”（CLOSING）状态...终端在接到WebSocket 连接失效的指令后，不能继续尝试处理来自另一端的数据（包括响应的关闭帧）。...为了实现这些，客户端必须像第 7.1.7 节中定义的一样让WebSocket 连接失败。 如果任意一端底层的传输连接意外丢失，客户端必须让WebSocket 连接失败。...1010 1010 表示终端（客户端）因为预期与服务端协商一个或者多个扩展，但是服务端在 WebSocket 握手中没有响应这个导致的关闭。...这个状态码是用于上层应用来表示连接失败是因为 TLS 握手失败（如服务端证书没有被验证过）导致的关闭的。 7.4.2 保留状态码范围 0-999 0-999 的状态码都没有被使用。
，而状态码就存在于这个响应报文里 1××：提示信息，表示目前是协议处理的中间状态，还需要后续的操作； 2××：成功，报文已经收到并被正确处理； “200 OK”是最常见的成功状态码，表示一切正常...“204 No Content”的含义与“200 OK”基本相同，但响应头后没有body数据 “206 Partial Content”是HTTP分块下载或断点续传的基础，它与200一样，但body里的数据不是资源的全部...Bad Request”是一个通用的错误码，表示请求报文有错误，但具体是数据格式错误、缺少请求头还是 URI 超长它没有明确说，只是一个笼统的错误 “403 Forbidden”实际上不是客户端的请求出错...使用二进制帧，结构比较简单，特殊的地方是有个“掩码”操作，客户端发数据必须掩码，服务器则不用 WebSocket 利用 HTTP 协议实现连接握手，发送 GET 请求要求“协议升级”，握手过程中有个非常简单的认证机制...“意外”识别成 WebSocket，握手消息还增加了两个额外的认证用头字段（所谓的“挑战”，Challenge） Sec-WebSocket-Key：一个 Base64 编码的 16 字节随机数，作为简单的认证密钥
请求正常处理完毕 3XX Redirection 重定向 需要进行附加操作已完成请求 4XX Client Error 客户端错误 服务器无法处理请求 5XX Server Error 服务器错误 服务器处理请求出错...常见的状态码： 状态码 英文描述 描述 200 ok 请求正常，响应信息会随方法不同而不同 204 No Content 响应报文不含实体的主体部分 206 partial Content 范围请求...WebSocket是建立在HTTP基础上的协议，因此连接的发起方仍是客户端，服务器和客户端都可以直接向对方发送报文 WebSocket是长连接，一直会保持状态，减少了连接开销 握手请求 Upgrade...: websocket 握手响应 HTTP/1.1 101 Switching Protocols 十、构建Web内容的技术 1、HTML+CSS+JavaScript 2、Web应用 CGI（通用网关接口...XSS（15%）、phpMyAdmin（9%）、ZanCart（5%）、其他（32%） 2、针对Web的攻击模式 主动攻击：攻击者直接访问Web应用进行攻击，代表SQL注入 被动攻击：利用圈套策略执行攻击代码
Sec-WebSocket-Version: 13 复制代码 四. WebSocket 升级协商 在 WebSocket 握手阶段，会 5 个带 WebSocket 的 header。...Sec-WebSocket-Protocol 用于协商应用子协议:客户端发送支持的协议列表，服务器必须只回应一个协议名。如果服务器一个协议都不能支持，直接握手失败。...客户端可以不发送子协议，但是一旦发送，服务器无法支持其中任意一个都会导致握手失败。这个 header 客户端可选发送。...服务端如果都不支持，不会导致握手失败，但是此次连接不能使用任何扩展。 协商是在握手阶段，握手完成以后，HTTP 通信结束，接下来的全双工全部都交给 WebSocket 协议管理（TCP 通信）。...它被指定用在期待一个用于表示连接由于执行 TLS 握手失败而关闭的状态码的应用中（比如，服务器证书不能验证）。
WebSocket连接过程 客户端通过HTTP协议向服务端发送握手，服务端向客户端返回ACK，此时握手成功，建立连接并维持该连接； 后面服务端和客户端就可以基于建立的连接进行双向通信，直到连接关闭。...客户端消息请求，并给出响应。...decoder.parameters(); String userid = parameters.get("userid").get(0); // 通过它构造握手响应消息返回给客户端...= 200) { cf.addListener(ChannelFutureListener.CLOSE); } } } 2.2 客户端 2.2.1...response.decoderResult().isSuccess()) { throw new ProtocolException("响应内容解析失败！")
服务端为了告知客户端它已经接收到了客户端的握手请求，服务端需要返回一个握手响应。在服务端的握手响应中，需要包含两部分的信息。...服务端的握手响应和客户端的握手请求非常的类似。...如果 TLS 握手失败（比如服务端证书不能通过验证），那么客户端必须关闭连接，终止其后的 WebSocket 握手。...失败的界定就是，如果客户端握手请求中有 |Sec-WebSocket-Extensions|，但是服务端返回的 |Sec-WebSocket-Extensions| 中包含了客户端请求中没有包含的值，那么必须标记连接为失败...如果服务端的握手响应不符合 4.2.2 小节中的服务端握手定义的话，客户端必须标记连接为失败。
它是从 HTTP 到 WebSocket 的桥梁。在握手过程中，协商连接的细节，并且如果行为不合法，那么任何一方都可以在完成前退出。服务端必须仔细理解客户端的所有要求，否则可能出现安全问题。...通常情况下，服务端可以在 HTTP 响应体中提供握手失败的原因 。如果服务端不支持该版本的 WebSocket，那么它应该发送包含它支持的版本的 Sec-WebSocket-Version 头。...2.2 服务端握手响应当服务端收到握手请求时，将发送一个特殊响应，该响应表明协议将从 HTTP 变更为 WebSocket。...下面的 Python 代码根据Sec-WebSocket-Key请求头生成Sec-WebSocket-Accept响应头的值：import typingfrom hashlib import sha1import...下图是握手过程中的服务端响应报文：可见，客户端和服务端协商使用扩展“permessage-deflate”，也就是对每条消息使用 deflate 压缩。
== 4) return; // 当请求成功或失败时，改变 promise 的状态 if (this.status === 200) { resolve(this.response...或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的...user_id=xxx WebSocket 的握手 和 TCP、TLS 一样，WebSocket 也要有一个握手过程，然后才能正式收发数据。...另外，为了防止普通的 HTTP 消息被“意外”识别成 WebSocket，握手消息还增加了两个额外的认证用头字段（所谓的“挑战”，Challenge）： Sec-WebSocket-Key：一个 Base64...，结构比较简单，特殊的地方是有个“掩码”操作，客户端发数据必须掩码，服务器则不用； WebSocket 利用 HTTP 协议实现连接握手，发送 GET 请求要求“协议升级”，握手过程中有个非常简单的认证机制
WebSocket协议建立连接的时候需要握手，握手过程中需要借助HTTP协议来完成，当连接建立后，就可以使用WebSocket协议进行通信，通信结束后，通信双方都可以关闭连接。...其中，WebSocket协议握手阶段是WebSocket协议的基础，接下来将重点讲述WebSocket协议如何通过HTTP协议进行握手，从而建建立连接。...WebSocket握手 WebSocket协议通过HTTP协议进行握手是为了兼容基于HTTP的服务器端软件和中间设施，使同一个端口能够接受HTTP客户端和WebSocket客户端，为了这个目的，WebSocket...Connection: Upgrade Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s= 需要注意的是，该响应报文的状态码并不是常见的200状态码，...HTTP报文当成WebSocket协议握手报文。
如果服务器没有（或者不能）升级这次连接，它会忽略客户端发送的 Upgrade 标头字段，返回一个常规的响应：例如一个 200 OK)...."); WebSocket() 构造函数已经自动完成了发送初始 HTTP/1.1 连接的所有工作，然后为你处理握手及升级过程。...备注： 你也可以用 "wss://" URL 方式来打开安全的 WebSocket 连接。 如果想要自己重头实现 WebSocket 连接，就必须要处理握手和升级过程。...WebSocket 专有的标头 以下标头是在 WebSocket 升级过程中会出现的。...仅响应标头 来自服务器的响应可能包含这些。 Sec-WebSocket-Accept 当服务器愿意发起 WebSocket 连接时，其包含在打开握手过程中来自服务器的响应消息中。
一个WebSocket的简单Echo例子：例子代码来自：http://www.websocket.org/echo.html 使用一个文本编辑器，把下面代码复制保存在一个 websocket.html...文件中，然后只要在浏览器中打开它，页面就会使用 websocket 自动连接，发送一个消息，显示接受到的服务器响应，然后关闭连接。...当Browser和WebSocketServer连接成功后，会触发onopen消息; websocket.onopen = function(evt) { }; 如果连接失败，发送、接收数据失败或者处理数据出现错误...Browser与WebSocket服务器通过TCP三次握手建立连接，如果这个建立连接失败，那么后面的过程就不会执行，Web应用程序将收到错误消息通知。 2....否则，握手连接失败，Web应用程序会收到onerror消息，并且能知道连接失败的原因。
在握手阶段，可以通过相关请求首部进行 安全限制、权限校验等。 2、服务端：响应协议升级 服务端返回内容如下，状态代码101表示协议切换。到此完成协议升级，后续的数据交互都按照新的协议来。...当客户端、服务端协商采用WebSocket扩展时，这三个标志位可以非0，且值的含义由扩展进行定义。如果出现非零的值，且并没有采用WebSocket扩展，连接出错。 Opcode: 4个比特。...前面提到了，Sec-WebSocket-Key/Sec-WebSocket-Accept在主要作用在于提供基础的防护，减少恶意连接、意外连接。...这样可以避免客户端发送ajax请求时，意外请求协议升级（websocket upgrade） 可以防止反向代理（不理解ws协议）返回错误的数据。...: Server → Client: HTTP/1.1 200 OK Sec-WebSocket-Accept: <connection-key
标头字段中回显 握手响应 来自服务器的握手其第一行是HTTP状态行，状态代码为101，如果服务器返回除101之外的任何状态代码则都表明WebSocket握手尚未完成： HTTP/1.1 101 Switching...WebSocket客户机握手中指定的值之一，使用多个子协议的服务器必须确保它基于客户端的握手选择一个子协议，并在握手中指定它： Sec-WebSocket-Protocol: chat 完整示例 握手请求与握手响应的简易示例如下...，响应还具有"Upgrade"和"Sec-WebSocket-Accept"标头，反向代理应该通过检查状态代码和其他标头来检查后端是否确实准备好建立WebSocket连接，如果一切都正确，那么反向代理将响应从后端转换到客户端..."中的协议版本错误，代理未验证"Sec-WebSocket-Version"标头并认为升级请求正确并将请求转到后端 第二步：后端发送状态代码为"426"的响应，因为标头"Sec-WebSocket-version..."中的协议版本不正确，然而反向代理没有检查来自后端的足够响应(包括状态代码)并认为后端已准备好进行WebSocket通信，此外它还将请求转换为客户端 第三步：反向代理认为在客户端和后端之间建立了WebSocket
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
