Vue-Socket.io

github地址：https://github.com/MetinSeylan/Vue-Socket.io

安装：

npm install vue-socket.io -S

注册：

import Vue from 'vue'
import VueSocketio from 'vue-socket.io'Vue.use(VueSocketio, 'http://socketserver.com:1923')

实例应用：

var vm = new Vue({sockets:{ //将（socket.on）绑定事件放在sockets中connect: function(){console.log('socket connected')},customEmit: function(val){console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')}},methods: {clickButton: function(val){// $socket is socket.io-client instancethis.$socket.emit('emit_method', val);}}
})

创建一个新的监听器：

this.$options.sockets.event_name = (data) => {console.log(data)
}

删除监听器：

delete this.$options.sockets.event_name;

触发服务端事件：

this.$socket.emit('event_name', msg1，msg2，...);

配合VUEX使用：

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex);export default new Vuex.Store({state: {connect: false,message: null},mutations:{SOCKET_CONNECT: (state,  status ) => {state.connect = true;},SOCKET_USER_MESSAGE: (state,  message) => {state.message = message;}},actions: {otherAction: (context, type) => {return true;},socket_userMessage: (context, message) => {context.dispatch('newMessage', message);context.commit('NEW_MESSAGE_RECEIVED', message);if (message.is_important) {context.dispatch('alertImportantMessage', message);}...}}
})

转载于:https://www.cnblogs.com/fanlinqiang/p/7816764.html

Vue-Socket.io相关推荐

koa+mysql+vue+socket.io全栈开发之web api篇
原文地址:koa+mysql+vue+socket.io全栈开发之web api篇目标是建立一个 web QQ的项目,使用的技术栈如下: 后端是基于koa2 的 web api 服务层,提供curd ...
一个基于 Spring Cloud + Vue + Socket.IO 的在线聊天网站，不来体验一下吗？
前言 2022年8月1日,经过一系列的准备工作,这个充满 BUG 的神奇网站在今天发布上线了.因为网站目前的主要功能是在线聊天,所以暂且就先叫它 EasyChat 吧. EasyChat 是一个可以在 ...
利用dao传值给mysql_koa+mysql+vue+socket.io全栈开发之数据访问篇
后端搭起大体的框架后,接着涉及到的就是如何将数据持久化的问题,也就是对数据库进行 CURD 操作. 关于数据库方案, mongodb 和 mysql 都使用过,但我选用的是 mysql,原因: 目前为 ...
Socket.io 聊天室（代码已开源）
1.启发 1.1 最近得闲有空玩一下Socket.io跟RabbitMQ所以造个小项目自己玩玩. 1.2 当然不是正式项目,个人复习测试所用.设计部分有的地方也不太合理,UI也是随便弄的. 1. ...
vue.js+socket.io打造一个好玩的新闻社区
title: Socket.io+vue打造新闻社区 date: 2017-06-12 20:19:05 tags: [vue.js,javascript,socket.io] vue2.0 + so ...
vue.js+socket.io+express+mongodb打造在线聊天[一]
vue.js+socket.io+express+mongodb打造在线聊天在线地址观看 http://www.chenleiming.com/vuechat github地址 https://gi ...
vue和socket.io开发简单web聊天室
2019独角兽企业重金招聘Python工程师标准>>> 效果预览 https://www.wangchunjian.top/chat.html 需要用到的库 https://sock ...
Vue全家桶+Socket.io+Koa2打造一个智能聊天室接口已开放
Vue.js+Socket.io+Koa2打造一个智能聊天室 Vue.js全家桶+Socket.io+Express/Koa2 打造的一个智能聊天室. 已经开源啦!为了方便大家学习,智能机器人.IP定 ...
大型项目实战Vue+Vuex+Koa2+Socket.io+Jssdk联合打造无人点餐系统
课程简介此套视频教程为2018年推出的,项目使用Vue+Vuex+Koa2+Socket.io+Jssdk+小票打印机打造无人点餐系统,课程视频.课件.源码齐全,手把手教会学员用Vue开发一个颠覆传 ...
Vue全家桶+Socket.io+Express/Koa2打造网页版手机QQ
Vue全家桶+Socket.io+Express/Koa2打造的网页版手机QQ(web app),高仿手机QQ7.1.0版本.为了方便大家学习,现在IP定位接口和实时气温接口也开放了!接口请在源码中查 ...

Vue-Socket.io

Vue-Socket.io相关推荐

最新文章

热门文章