Vue-Socket.io
2024-10-22 08:26:17
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 instance
this.$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);
}
...
}
}
})
最新文章
- contiki-process结构体
- HTML5新增标签及具体用法
- 14.S5PV210串行通信编程实战
- robotframework笔记3--如何编写好的测试用例使用机器人的框架
- javaweb-c3p0
- TCP网络拥塞控制
- test命令的用法
- ComboTree使用
- C++：类的成员函数定义方式
- iOS回顾笔记（ 01 ）
- 制作docker-jdk7-zookeeper镜像(非集群版)
- Linux记录-grafana opentsdb安装
- freemarker是什么东西？
- MyString
- 2018-2019-2 《网络对抗技术》Exp4 恶意代码分析 Week6 20165311
- git同步遇到报错
- linux Ubuntu 16.04安装 postgresql
- JAVA实训第四次作业
- ES6 系列之私有变量的实现
- multiprocssing,threading,多进程多线程初识