vue-socket.io的使用方法（单页面使用）

最新推荐文章于 2024-08-08 08:27:22 发布
最新推荐文章于 2024-08-08 08:27:22 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： vue-socket.io vue.js javascript 文章标签： javascript vue.js html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39128185/article/details/105406385
版权

不多逼逼,直接上代码一目了然

一、下载
cnpm install vue-socket.io socket.io-client --save
注意： 两个插件 vue-socket.io， socket.io-client

二、使用前注意点
1.必须在组件加载前完成注册

三、使用

1.为了使代码简洁使用promise将获取soket地址的方法单独抽离了
在这里插入图片描述

  1. 在路由跳转前使用**(一定这样做,否则页面中的所有socket.io提供的方法都无法使用)**

在这里插入图片描述

4. 组件中使用
在这里插入图片描述
下载了但是导入后运行报错问题: 指定vue-socket.io@3.0.7版本
这个时候就已经可以了.只是简单的使用,如若没能完全解决你的问题,就要在此基础上在自己进行百度

A Three
关注
专栏目录
vue+socket.io在当前页面引入并使用socket.io(二)
weixin_46276411的博客
06-16 531
第一步：下载 "vue-socket.io": "^3.0.10", "socket.io-client": "^2.4.0", 第二步：引入 import io from "socket.io-client"; 第三步：再created中连接socket.io （xxxxxxxx：后台给的地址，我写到了环境里边） (query:地址后边要携带的参数，自己写) const socket = io(xxxxxxxx, { query: { userId:this.userId },
vue中使用 vue-socket.io 的三种方式及采坑记录
小陈的博客
10-08 401
在日常的前端开发过程中，我们经常会碰到列表很长，不可能完全显示出来，所以就要进行分页，每页固定显示几条，然后下面是页数，点到哪页显示哪页的内容。除了常见的分页加载外，还要点击按钮加载，这种加载方法就是不需要点击下一页这种了，直接点击按钮往第一页的后面补上下一页的内容，非常方便。除了以上两种，滚动加载也是用的比较多的一种列表加载方法，下面就这三种方法做一下总结归纳，方便需要的小伙伴们使用。整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
Vue-Socket.io 使用教程
最新发布
gitblog_00666的博客
08-08 885
Vue-Socket.io 使用教程 Vue-Socket.io???? Socket.io implementation for Vuejs and Vuex项目地址:https://gitcode.com/gh_mirrors/vu/Vue-Socket.io 项目介绍 Vue-Socket.io 是一个专门为 Vue.js 提供的插件，它基于 socket.io-client，旨在简化在 Vue...
最详细的vue-socket.io用法
热门推荐
weixin_43898997的博客
02-16 2万+
vue-socket.io避坑指南
uniapp中使用socket IO
Boo_crob的博客
05-06 1万+
用socket io 来完成实时通信。 首先 先安装socket 依赖 在控制台中输入以下任意一个命令行。 这里我用的第二种 npm install vue-socket.io --save npm install socket.io-client --save 配置文件 安装完成后 创建一个仓库在默认路径下与static同级创建一个store文件夹，文件夹下有index.js。index.js中用于写各种vuex中的逻辑问题 import Vue from 'vue' import Vuex fr.
vue 中如何使用socket
Young_Gao的博客
05-16 1万+
vue中使用socket协议vue-cli 脚手架目录结构1.参照vue-socket.io的git地址说明文档进行安装npm install vue-socket.io2.main.js里面注册一下。vue.use 里面的链接是后台的提供给你的socket地址// socketimport VueSocketio from 'vue-socket.io';Vue.use(VueSocketio,...
使用socket.io + Vue + uni-app搭建的完整分离版客服系统源码.zip
05-09
使用socket.io + Vue + uni-app搭建的完整分离版客服系统，clone下来后安装必要依赖即可跑起来，功能众多，注释详细。 使用socket.io + Vue + uni-app搭建的完整分离版客服系统，clone下来后安装必要依赖即可跑...
前端vue-socket.io后端Java netty-socketio传信息
weizhida_的博客
09-02 1840
前端vue-socket.io后端Java netty-socketio传信息 一：vue 1.package.json "dependencies": { "vue-socket.io": "^3.0.0" }, 2.main.js import VueSocketIO from 'vue-socket.io' import io from 'socket.io-client' Vue.use( new VueSocketIO({ debug: false, conn
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
08-29
本篇文章主要介绍了如何使用 Vue、Socket.io、Express 和 MongoDB 实现一个简易的多房间在线群聊示例。该示例项目使用 Vue 作为前端框架，Socket.io 实现实时通信，Express 作为后端服务器，MongoDB 作为数据库管理...
vue-socket.io 的使用及其局部引入解决方案
weixin_43536737的博客
05-12 2306
如何在客户端使用 vue-socket.io 与服务器端实时双向通信前言vue-socket.io 在 vue 中的使用安装依赖模块使用在 main.js 全局引入模块在模板 .vue 局部引入模块结语参考 前言 基本的 HTTP 请求可以满足客户端访问数据的需要。如果需要“实时”刷新数据，可以采用轮询（设置一个定时器，每隔很短的一段时间发送 HTTP 请求重新获取数据）或长轮询（long poll，服务端收到 HTTP 请求后，将回调阻塞到有新数据产生）的方式。 轮询需要持续频繁地发送请求，会造成带宽和服
Vue-Socket.io, vuejs的socket.io 实现.zip
09-17
Vue-Socket.io, vuejs的socket.io 实现 Vue-Socket.io Vuejs 2和Vuex的socket.io 实现安装npm install vue-socket.io --save用法配置从URL字符串自动连接import V
js之页面列表加载常用方法总结
Guan'Blog
09-17 1097
在日常的前端开发过程中，我们经常会碰到列表很长，不可能完全显示出来，所以就要进行分页，每页固定显示几条，然后下面是页数，点到哪页显示哪页的内容。除了常见的分页加载外，还要点击按钮加载，这种加载方法就是不需要点击下一页这种了，直接点击按钮往第一页的后面补上下一页的内容，非常方便。除了以上两种，滚动加载也是用的比较多的一种列表加载方法，下面就这三种方法做一下总结归纳，方便需要的小伙伴们使用。以上就是我在日常开发过程中的用的几种加载的方法，如果有什么问题，欢迎邮箱联系我。
vue中简单的用websocekt获取后端数据
weixin_67307854的博客
03-29 631
websocket简单请求
socket.io在vue的基本使用
m0_65519288的博客
06-11 8263
对于上一篇内容，没有说到socket的基本使用，这篇文章说说socket.io在前端和后端的使用。该项目的技术栈为：前端：vue2 + socket.io后端：express + socket.io。
Vue中 引入使用 vue-socket.io
江湖行骗老中医
10-18 2354
vue-socket.io 其实是在 socket.io-client（在浏览器和服务器之间实现实时、双向和基于事件的通信） 基础上做了一层封装，将 $socket 挂载到 vue 实例上，同时可使用 sockets 对象轻松实现组件化的事件监听，在 vue 项目中使用起来更方便。
猿创征文｜vue中SocketIO的正确使用方法，并且解决跨域问题
wangxiaosheng11的博客
09-01 4388
vue中SocketIO的正确使用方法，并且解决跨域问题
Vue 使用 Vue-socket.io 实现即时聊天应用（通讯篇）
~朴：shu的博客
11-11 9323
1. 上次的博客已经讲述了如何建立服务器，如何建立客户端，并且与服务器进行连接，那么本文接着上次，讲述一下客户端与服务器端的通讯是如何实现的。 PS:事件的发布与监听、广播事件、私聊事件、其他常用事件。 2. 事件的发布与监听： 2.1 emit（）、on（）： 在vue中，组件可以发布自定义事件，使用emit，其他地方直接使用 on 监听这个事件即可。而socket.io 也是类似的，发布事件用 emit ，监听事件用 on； // 监听客户端连接...
vue2使用vue-socket.io
08-29
可以使用Vue-socket.io提供的方法来监听Socket事件，并实现相应的功能。 总结一下，Vue2使用vue-socket.io扩展可以实现与Socket.io的集成，通过注册Vue-socket.io并传入相应的配置参数，可以在Vue实例中实现Socket...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值