vue结合websocket
1. vue结合websocket
本人首先是写java后端的，我也是第一次接触websocekt,当然前端也接触的也少,但是楼主已经默默的学会了flex布局，下面的是做的测试页面，写的不好还请谅解。下面时本人总结的websocket可以直接复制拿去用，当然这里说的是前端。这里后端用的netty，后端就不贴源码了，怕被同事看到。项目用的是诺伊框架，
2.上干货 前端websocket
<template>
<div class="test">
{{redata1.userId}}
</div>
</template>
<script>
export default {
name : 'test',
data() {
return {
websock: null,
timer:undefined,
redata1:{
userId:undefined
},
dataping:{
heartbeat:"心跳"
},
sendform:{
userId:"123456"
}
}
},
created() {
if(window.WebSocket){
this.websock = new WebSocket("ws://127.0.0.1:58080/webSocket");
this.initWebSocket();
}else{
alert("浏览器不支持websocket")
}
},
destroyed() {
clearInterval(this.timer)
this.websock.close() //离开路由之后断开websocket连接
},
mounted(){
// const timer = setInterval(()=>{
// // 这里调用调用需要执行的方法，1为自定义的参数，由于特殊的需求它将用来区分，定时器调用和手工调用，然后执行不同的业务逻辑
// this.websocketonopen();
// }, 3000) // 每两秒执行1次
},
methods: {
initWebSocket(){ //初始化weosocket
console.log(this.websock)
this.websock.onmessage = this.websocketonmessage;
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onclose = this.websocketclose;
},
websocketonopen(){ //连接建立之后执行send方法发送数据
let actions = this.sendform
this.websocketsend(JSON.stringify(actions));
this.sendPing();
},
sendPing(){
this.timer = setInterval(()=>{
let actions = this.dataping
this.websock.send(JSON.stringify(actions));
},5000)
},
websocketonerror(){//连接建立失败重连
this.initWebSocket();
},
websocketonmessage(e){ //数据接收
if(e.data=="心跳连接存在"||e.data=="服务器连接成功"){
console.log(e.data)
}else{
this.redata1 = JSON.parse(e.data)
console.log("11111111111---------"+this.redata1.userId)
}
},
websocketsend(Data){//数据发送
this.websock.send(Data);
},
websocketclose(e){ //关闭
console.log('断开连接',e);
},
},
}
</script>
<style scoped lang="scss">
.test{
height: calc(100vh - 84px);
width: 100%;
display: flex;
}
</style>
vue结合websocket相关推荐
- html5 长链接,Vue通过WebSocket建立长连接，连接
Vue通过WebSocket建立长连接,连接 使用场景: 在项目开发中,后端需要处理一连串的逻辑,或者等待第三方的数据返回来进行处理之后在返回给前端,可能时间会很长,而且前端也不知道后端什么时候能处理 ...
- SpringBoot+Vue整合WebSocket实现前后端消息推送
场景 WebSocket HTTP 协议是一种无状态的.无连接的.单向的应用层协议.它采用了请求/响应模型.通信请求只能由客户端发起,服务端对请求做出应答处理. 这种通信模型有一个弊端:HTTP 协议 ...
- vue+express+websocket+mongodb在线群聊工具
vue+express+websocket+mongodb在线群聊工具 目录 vue+express+websocket+mongodb在线群聊工具 1.项目概述 2.项目运行 3.项目代码细节 3. ...
- 基于springBoot、Vue、websocket的聊天系统：数据库设计
一般来说,需求出来之后,经过需求评审后,就需要进行数据库的设计了,毕竟后续功能的开发,很大程度上依赖于表结构的设计,下面简单聊聊web聊天系统的数据库是如何设计的.如需更全面的了解该系统,可以阅读相关 ...
- springboot+VUE整合websocket
引入maven <!--webSocket--><dependency><groupId>org.springframework.boot</groupId& ...
- SpringBoot+Vue使用WebSocket
一:什么是Websocket? WebSocket是HTML5下一种新的协议(websocket协议本质上是一个基于tcp的协议) 它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到 ...
- VUE+SpringBoot+Websocket实现前后端通信案例分享
PS→无奈:不为模糊不清的未来担忧,只为清清楚楚的现在努力. 版权声明:本文为博主原创文章,未经博主允许不得转载. 醒来无事就把先前做过的一个websocket实现扫码登录的案例记录一下,以免以后再次 ...
- echarts+vue+koa+websocket（精）
项目一览: http://jinruixiang.top:4000/ github:https://github.com/chenqi13814529300/echarts 比一篇前后端数据综合项目教 ...
- websocket简介及上手，node + vue实现websocket服务
websocket简介及上手 1.websocket初识: WebSocket 是 HTML5 提供的一种全双工通讯的协议,类似于http,同样建立在TCP上的传输协议,被称为ws,加密传输称为wss ...
最新文章
- 异常：java.lang.IllegalArgumentException: Control character in cookie value or attribute.
- 编译时检查JPA查询
- 利用Excel VBA畫出所有圖標
- CLIP还能做视频字幕任务！腾讯清华提出CLIP4Caption，ACM MM2021挑战赛第二名！
- leecode-11盛最多水的容器C版-双指针的使用
- 用truffle部署智能合约到以太坊网络（truffle+infura）的简易方法
- mybatis 一对一、一对多查询、多对多（使用注解）
- Oracle10g安装了11g的ODAC后，PL/SQL连接提示TNS：无法解析指定的连接标识符
- 20145205 《信息安全系统设计基础》第1周学习总结
- 设计模式——单例模式八种方式实现与分析（附代码示例）
- java浪漫代码_程序员表白教程，这些代码用过的都说浪漫
- ZeroMQ文档白嫖：一文述完ZeroMQ的套接字选项
- 计算机网络路由器的配置连接不上,路由器安装设置好后电脑还是不能上网解决办法...
- 图书馆大数据分析系统能帮助图书馆完成哪些事，意义有多大？
- 太吓人了,dub编译,编译phobos
- Android ANR日志分析指南
- 教师如何创建在线查分系统
- Android系统移植与调试之-------)如何修改Android手机NFC模块，使黑屏时候能够使用NFC
- Hdu6355 Fireflies 题解
- 第一章 初识HTML