1、websocket简介

websocket最主要特点是:服务器可以主动给浏览器发送消息,而不是被动接收浏览器请求。

websock协议可以参考:http://www.ruanyifeng.com/blog/2017/05/websocket.html

WebSocket 使用ws或wss协议(非http协议),Websocket是一个持久化的协议,相对于HTTP这种非持久的协议来说。WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信

2、实现代码

(1)websocket.js

let websock;

// 持续连接
function connection(wsuri) {
websock = new WebSocket(wsuri); // 建立连接
websock.onopen = function(e) {
console.log('收到服务器握手包.');
setInterval(function() {
let agentData = {'name': 'ping', 'message': 'message'}
websocketsend(agentData)
}, 30000)
} // 断开连接
websock.onclose = function(e) {
console.log('和服务器断开连接! (' + e.code + ')');
} // 连接发生错误
websock.onerror = function() {
console.log('websock连接发生错误');
}
} // 业务代码发送数据
function sendSock(agentData) {
console.log('agentData', agentData) // 链接成功,可以通信
if (websock.readyState === websock.OPEN) { websocketsend(agentData);
} else if (websock.readyState === websock.CONNECTING) { // 若是正在链接,则等待1s后重新调用
setTimeout(function() {
sendSock(agentData);
}, 1000);
} else { // 若未开启 ,则等待1s后重新调用
setTimeout(function() {
sendSock(agentData);
}, 1000);
}
} // 数据发送
function websocketsend(agentData) {
websock.send(JSON.stringify(agentData));
} export {connection, sendSock, websock}

(2)业务代码

//注意修改路径
import * as websocket from 'websocket.js'
//vue mounted时挂在websocket
mounted() {
websocket.connection(yourUrl) // onmessage 用于指定收到服务器数据后的回调函数。
websocket.websock.onmessage = (e) => {
//业务处理
}
}
methods:{
handleEvent() {
//发送数据
websocket.sendSock(yourParams)}
}

(3)websockt需要服务端配置好服务。

websocket 协议 使用的更多相关文章

  1. Websocket 协议解析

    WebSocket protocol 是HTML5一种新的协议.它是实现了浏览器与服务器全双工通信(full-duplex).          现 很多网站为了实现即时通讯,所用的技术都是轮询(po ...

  2. WebSocket协议开发

    一直以来,网络在很大程度上都是围绕着HTTP的请求/响应模式而构建的.客户端加载一个网页,然后直到用户点击下一页之前,什么都不会发生.在2005年左右,Ajax开始让网络变得更加动态了.但所有的HTT ...

  3. 初识WebSocket协议

    1.什么是WebSocket协议 RFC6455文档的表述如下: The WebSocket Protocol enables two-way communication between a clie ...

  4. Websocket协议的学习、调研和实现

    本文章同时发在 cpper.info. 1. websocket是什么 Websocket是html5提出的一个协议规范,参考rfc6455. websocket约定了一个通信的规范,通过一个握手的机 ...

  5. python测试基于websocket协议的即时通讯接口

    随着html5的广泛应用,基于websocket协议的即时通讯有了越来越多的使用场景,本文使用python中的websocket-client模块来做相关的接口测试 import webclient ...

  6. Websocket协议之php实现

    前面学习了HTML5中websocket的握手协议.打开和关闭连接等基础内容,最近用php实现了与浏览器websocket的双向通信.在学习概念的时候觉得看懂了的内容,真正在实践过程中还是会遇到各种问 ...

  7. Websocket协议数据帧传输和关闭连接

    之前总结了关于Websocket协议的握手连接方式等其他细节,现在对socket连接建立后的数据帧传输和关闭细节总结. 一.数据帧格式 数据传输使用的是一系列数据帧,出于安全考虑和避免网络截获,客户端 ...

  8. Websocket协议之握手连接

    Websocket协议是为了解决web即时应用中服务器与客户端浏览器全双工通信的问题而设计的,是完全意义上的Web应用端的双向通信技术,可以取代之前使用半双工HTTP协议而模拟全双工通信,同时克服了带 ...

  9. WebSocket协议

    websocket 简介 (2013-04-09 15:39:28) 转载▼   分类: websocket 一 WebSocket是html5新增加的一种通信协议,目前流行的浏览器都支持这个协议,例 ...

  10. Jmeter实现WebSocket协议的接口和性能测试方法

    WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duplex). 浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一 ...

随机推荐

  1. 【贪心大水题】BZOJ3410-[Usaco2009 Dec]Selfish Grazing 自私的食草者

    [题目大意] 给出n个区间,问最多选取多少个区间使得它们互相不重叠. [思路] 水题quq改善心情用.按照右端点大小排序,每次更新上一次的右端点,如果当前左端点大于上次右端点可取. #include& ...

  2. 不按装mysql情况下,php安装pdo_mysql

    安装pdo时遇到 --with-pdo-mysql  这个要指向mysql安装目录:可是我这台机器不安装mysql; 解决方法: [root@localhost app]#  yum install ...

  3. ACM -- 算法小结(三)反转句子顺序与反转单词组成顺序

    hdoj 1321 反转句子字母顺序 ac 2011/10/05 #include <iostream> #include <string> #include <algo ...

  4. corosync

    前提: )本配置共有两个测试节点,分别node1.magedu.com和node2.magedu.com,相的IP地址分别为172.: )集群服务为apache的httpd服务: )提供web服务的地 ...

  5. Ext如何动态添加一行组件

    用的column布局,点击一个按钮能添加一行组件,如文本框,有下拉框等. 如: 效果: 实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

  6. 关于spring-mvc.xml的mvc:resources元素浅析。

    配置如下: <!-- 配置静态资源 --><mvc:resources location="/static/" mapping="/static/**& ...

  7. matlab mex中C++内存全局共享和持久化

    为提高matlab程序运行速度,经常将核心程序编写为mex动态链接库: 然而,经常情况下,在mex函数中分配的内存或句柄希望在mex函数调用完成后在后续函数调用中能够共享而不被释放,本程序方法为解决该 ...

  8. /etc/fstab格式的问题

    [root@localhost etc]# cat fstab /dev/VolGroup00/LogVol00 /                       ext3    defaults    ...

  9. Android之旅十四 android中的xml文件解析

    在我们做有关android项目的时候,肯定会涉及到对xml文件的解析操作.以下给大家介绍一下xml文件的解析.包括DOM.SAX.Pull以及曾经我们用到的DOM4J和JDOM: 要解析的XML文件: ...

  10. Java中的break和continue关键字使用总结

    java中的break和continue关键字使用总结   一.作用和区别   break的作用是跳出当前循环块(for.while.do while)或程序块(switch).在循环块中的作用是跳出 ...