当前位置: 首页 > news >正文

前端使用webscoket

前端

<template><div class="wrap"><button @click="socketEmit">连接Socket</button><button @click="socketSendmsg">发送数据</button></div>
</template><script>
export default {data(){return {randomId:null,}},methods:{socketEmit(){// 开始连接 socketthis.$socket.open();// 订阅事件,testCall 是与后端约定好的名称this.sockets.subscribe('testCall', (res) => {if(res.code == 200 && res.randomId === this.randomId){console.log('召唤成功')}})},// 发送消息socketSendmsg(){this.randomId = Math.random();// testCall 是与后端约定好的名称this.$socket.emit('testCall', {"randomId": this.randomId,"deviceId": "123456"});},},sockets: {connect: function () {console.log('连接成功')},disconnect: function () {console.log('断开连接')},reconnect: function () {console.log('重新连接')},},beforeDestroy(){// 关闭 Socketthis.sockets.unsubscribe('testCall');this.$socket.close();},
}
</script>

main.js

import VueSocketIO from 'vue-socket.io'Vue.use(new VueSocketIO({// 生产环境建议关闭,开发环境打开(在控制台看到socket连接和事件监听的信息)debug: true,connection:'http://metinseylan.com:1992',options:{// 创建时是否自动连接 我们这里设定为false,在指定页面再开启autoConnect: false,// 路径(默认值:/socket.io/)path: "/my-app/",// 目前有两种传输方式:HTTP long-polling(可简称:polling)、WebSockettransports: ['polling'],// 附加请求头(在服务器端的 socket.handshake.headers 对象中找到)extraHeaders:{},},
}))

相关文章:

  • Rust4.2 Common Collections
  • P6入门:项目初始化5-项目支出计划Spending Plan
  • 【计算机网络】VRRP协议理论和配置
  • Scala爬虫实战:采集网易云音乐热门歌单数据
  • 探索STM32系列微控制器的特性和性能
  • 二、Linux用户管理
  • Collectors.groupingBy方法的使用
  • 注意力机制(Attention)、自注意力机制(Self Attention)和多头注意力(Multi-head Self Attention)机制详解
  • Web安全之PHP的伪协议漏洞利用,以及伪协议漏洞防护方法
  • 【算法】算法题-20231114
  • 20. 机器学习——PCA 与 LDA
  • 神经网络激活函数的使用
  • 友元的三种实现
  • c语言-assert(断言)的笔记
  • openssl+sha256开发实例(C++)
  • 网络传输文件的问题
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • 【许晓笛】 EOS 智能合约案例解析(3)
  • Codepen 每日精选(2018-3-25)
  • conda常用的命令
  • CSS 三角实现
  • Java 11 发布计划来了,已确定 3个 新特性!!
  • JAVA SE 6 GC调优笔记
  • JS实现简单的MVC模式开发小游戏
  • Linux Process Manage
  • MySQL常见的两种存储引擎:MyISAM与InnoDB的爱恨情仇
  • react-core-image-upload 一款轻量级图片上传裁剪插件
  • Vue官网教程学习过程中值得记录的一些事情
  • 初探 Vue 生命周期和钩子函数
  • 前端路由实现-history
  • 用mpvue开发微信小程序
  • 数据可视化之下发图实践
  • ​【已解决】npm install​卡主不动的情况
  • ​LeetCode解法汇总1276. 不浪费原料的汉堡制作方案
  • ​TypeScript都不会用,也敢说会前端?
  • #、%和$符号在OGNL表达式中经常出现
  • #Lua:Lua调用C++生成的DLL库
  • (175)FPGA门控时钟技术
  • (9)YOLO-Pose:使用对象关键点相似性损失增强多人姿态估计的增强版YOLO
  • (pytorch进阶之路)CLIP模型 实现图像多模态检索任务
  • (附程序)AD采集中的10种经典软件滤波程序优缺点分析
  • (附源码)springboot课程在线考试系统 毕业设计 655127
  • (附源码)计算机毕业设计ssm本地美食推荐平台
  • (论文阅读11/100)Fast R-CNN
  • (四)JPA - JQPL 实现增删改查
  • (循环依赖问题)学习spring的第九天
  • (一)插入排序
  • (转)Scala的“=”符号简介
  • (转)setTimeout 和 setInterval 的区别
  • (转)可以带来幸福的一本书
  • (转载)虚函数剖析
  • .bat文件调用java类的main方法
  • .form文件_一篇文章学会文件上传
  • .Net core 6.0 升8.0
  • .net 无限分类