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. WEB架构师成长之路 二

    法宝一:牛人爱惜自己的时间. 时间就是金钱,时间就是生命,时间如同健康一样,如果时间都没有,那成功也就是浮云了.所以牛人总是很爱惜自己的时间,总是在想办法提高自己的做事效率.我突然想了起来,我QQ里有 ...

  2. Linux进程守护——Supervisor 使用记录

    0.旁白 Supervisor是个父进程,你要守护的进程会以Supervisor的子进程形式存在,所以老子才可以管儿子 官网链接:http://supervisord.org/ [5.参数]那块不要看 ...

  3. Linux知识(3)----常用快捷键和命令

    这里收集整理了一些常用的命令. 1.常用快捷键 这个链接介绍很全:http://blog.sina.com.cn/s/blog_8cb5c0e501012l7x.html 1. Ctrl + W: 关 ...

  4. mp4网页播放代码,有声音无图像的解决办法~

    mp4网页播放代码,有声音无图像的解决办法~     关于网页播放mp4格式的视频,找了一些插件,这里推荐一下video.js 官方网址:http://www.videojs.com/ github ...

  5. 1036: [ZJOI2008]树的统计Count (树链剖分)

    1036: [ZJOI2008]树的统计Count Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3401  Solved: 1418[Submit] ...

  6. Using TXMLDocument, Working with XML Nodes

    Using TXMLDocument The starting point for working with an XML document is the Xml.XMLDoc.TXMLDocumen ...

  7. Shell升级,/bin/bash版本号4.1到4.3

    bash环境变量存在随意代码运行漏洞:"通过CGI请求方式能够导致远程代码运行,进而导致server被入侵.危害严重.且官方发布补丁也被绕过", [漏洞影响]: 1)bash受影响 ...

  8. 资源合并fis-postpackager-simple插件的使用

    FIS默认只会进行文件打包,不会对页面中的静态资源引用进行替换,这时可以利用fis-postpackager-simple插件进行资源替换. 安装: npm install -g fis-postpa ...

  9. Eclipse NDK 配置,不用安装Cygwin

    一.关于NDK:NDK全称:Native Development Kit.1.NDK是一系列工具的集合.NDK提供了一系列的工具,帮助开发者快速开发C(或C++)的动态库,并能自动将so和java应用 ...

  10. python 实现Hadoop的partitioner和二次排序

    我们知道,一个典型的Map-Reduce过程包 括:Input->Map->Partition->Reduce->Output. Partition负责把Map任务输出的中间结 ...