websocket通信中，send的使用

在建立web socket通信后，发送数据时，出现下图所示现象:

问题代码演示：

function TestSockets() {//实例化一个WebSocket对象var socket = new WebSocket("ws://127.0.0.1:8000/ws");//声明一个消息var message = {nickname: "benben_2015",email: "123456@qq.com",content: "I love programming"};//web sockets只能通过连接发送纯文本数据，所以对于复杂的数据结构，在通过连接发送之前，必须进行序列化。socket.send(JSON.stringify(message));
}

问题原因:

通常在实例化一个websocket对象之后，客户端就会与服务器进行连接。但是连接的状态是不确定的，于是用readyState属性来进行标识。它有四个值，分别对应不同的状态：

CONNECTING：值为0，表示正在连接；
OPEN：值为1，表示连接成功，可以通信了；
CLOSING：值为2，表示连接正在关闭；
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
这样问题的原因就很明显了，之所以数据不能发送出去，是因为websocket还处在“CONNECTING”状态下，连接还没有成功。

解决方案：

方案一：在状态为OPEN时，执行send方法即可

function TestSockets() {var socket = new WebSocket("ws://127.0.0.1:8000/ws");var message = {nickname: "benben_2015",email: "123456@qq.com",content: "I love programming"};//添加状态判断，当为OPEN时，发送消息if (socket.readyState===1) {socket.send(JSON.stringify(message));}else{//do something}
}

方案二：也可以设置事件监听，当为OPEN时，执行send操作

function TestSockets() {var socket = new WebSocket("ws://127.0.0.1:8000/ws");var message = {nickname: "benben_2015",email: "123456@qq.com",content: "I love programming"};message = JSON.stringify(message);//添加事件监听socket.addEventListener('open', function () {socket.send(message)});
}

方案三：实例对象websocket的onopen属性，可以用来指定连接成功后的回调函数

function TestSockets() {var socket = new WebSocket("ws://127.0.0.1:8000/ws");//设置连接成功后的回调函数socket.onopen=function () {console.log("socket has been opened");var message = {nickname: "benben_2015",email: "123456@qq.com",content: "I love programming"};message = JSON.stringify(message);socket.send(message);};
}

https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

websocket通信中，send的使用相关推荐

在vue中使用SockJS实现webSocket通信
最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助 ...
在vue中webSocket通信
1.简单介绍基于webSocket通信的库主要有 socket.io,SockJS,这次用的是 SockJS. 2.前提这里我们使用sockjs-client.stomjs这两个模块,要实现web ...
c语言实现stomp协议客户端,在vue中使用SockJS实现webSocket通信
最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些 ...
Python3+WebSockets实现WebSocket通信
一.说明 1.1 背景说明前端时间同事说云平台通信使用了一个websocket的东西,今天抽空来看一下具体是怎么个通信过程. 从形式上看,websocket是一个应用层协议,socket是数据链路层 ...
C#(SuperWebSocket)与websocket通信
原文:C#(SuperWebSocket)与websocket通信客户端代码点击可以查看一些关于websocket的介绍 1 <!DOCTYPE html> 2 <html> ...
WebSocket 通信原理和详细使用（十六）
今天我们详细分析WebSocket 通信原理和使用一.什么是 WebSocket ? WebSocket --一种在 2011 年被互联网工程任务组( IETF )标准化的协议.WebSocket ...
《 Socket.IO》解决 WebSocket 通信
大家好呀,我是小菜~ 本文主要介绍 Socket.IO 微信公众号已开启,小菜良记,没关注的同学们记得关注哦! 在介绍 Socket.IO 之前, 我们先考虑一个问题, 如果这个时候有个需求, 类似实 ...
webSocket（与http请求区别、请求和返回示例、替代方法：ajax轮询、long poll、Flash、NodeJS实现WebSocket通信代码、原理、WebSocket构造函数详解）
目录简介优点请求示例请求成功返回示例替代方法 Ajax 轮询 long poll Flash NodeJS实现webSocket(ws模块) 服务端代码客户端代码在线网页客户端运行结果 ...
Netty作为服务端的websocket通信
http协议是无状态的,因此导致客户端每次通信都需要携带标识(session)给服务端,以此来识别是哪个客户端发送过来的信息.但是当服务端主动推送给客户端时就无法实现了,因为服务端不知道客户端在哪,此 ...

websocket通信中，send的使用

问题代码演示：

问题原因:

解决方案：

websocket通信中，send的使用相关推荐

最新文章

热门文章