Skip to content

Vuex mode event name strict matching mechanism removed, add Chinese document #308

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 171 additions & 0 deletions README.zh-CN.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
#### 安装
```bash
npm install vue-socket.io --save
```
main.js 代码
```javascript
import Vue from 'vue'
import store from './store'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'

const options = { path: '/my-app/' }; //Options object to pass into SocketIO

Vue.use(new VueSocketIO({
debug: true,
connection: 'http://metinseylan.com:1992',
options: {
path: options.path
}
})
);

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
```
#### 局部使用
组件的话就在基础属性里加上`sockets` 对象, 里面写上自己要监听的事件名
```javascript
new Vue({
sockets: {
connect: function () {
console.log('socket connected')
},
customEmit: function (data) {
console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
}
},
methods: {
clickButton: function (data) {
// $socket is socket.io-client instance
this.$socket.emit('emit_method', data)
}
}
})
```
#### 动态使用
如果你需要在运行时动态消费事件,你可以在Vue组件中使用' subscribe '和' unsubscribe '方法
```javascript

mounted() {
this.sockets.subscribe('EVENT_NAME', (data) => {
this.msg = data.message;
});
},
beforeDestroy() {
this.sockets.unsubscribe('EVENT_NAME');
}
```
#### vuex 模式
当你在安装中设置存储参数时,' Vue-Socket。io '将开始发送事件到Vuex商店。如果你为vuex设置了两个前缀,
你可以同时使用' actions '和' mutations '。但是,最好的使用方法就是" actions "
main.js 代码
```javascript
import Vue from 'vue'
import store from './store'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'

const options = { path: '/my-app/' }; //Options object to pass into SocketIO

Vue.use(new VueSocketIO({
debug: true,
connection: 'http://metinseylan.com:1992',
vuex: {
store,
actionPrefix: "socket_", // 默认值是大写的 SOCKET_
mutationPrefix: ""
},
options: {
path: options.path
}
})
);

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
```
store 代码
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
import { SOCKET_ERROE } from "./types"

Vue.use(Vuex)

export default new Vuex.Store({
state: {},
mutations: {
// 不建议在这里触发事件
[SOCKET_ERROE]() {
// do something
}
},
actions: {
socket_connect() {
// do something
}
}
})
```

#### 原始事件
event 事件
注意: `socket_` 是vuex模式下的一个前缀, 插件内部默认值是大写,需要保持vuex里的事件命名风格请自己传一个前缀名
##### `socket_connect`
参数: 无
在连接到命名空间时触发(包括成功的重新连接)

##### `socket_error`
参数: `error` (Object)错误对象
在发生连接错误时触发

##### `socket_disconnect`
参数: `reason` (String) 错误提示
断开连接时触发

##### `socket_reconnect`
参数:`attempt` (Number) 重新连接尝试次数
重新连接成功后触发

##### `socket_reconnect_attempt`
参数: `attempt` (Number) 重新连接尝试次数

##### `socket_reconnecting`
参数: `attempt` (Number) 尝试链接次数
尝试重新连接时触发

##### `socket_reconnect_error`
参数: `error` (Object) 错误对象
重新连接尝试错误时触发

##### `socket_reconnect_failed`
参数:无
无法在内部重新连接时触发`reconnectionAttempts`

##### `socket_connect_error`
参数:`connect_error` (Object) 错误对象
当发生名称空间中间件错误时触发

##### `socket_connect_timeout`
参数: `timeout` (String) 时间
在连接超时时触发
##### `socket_connecting`
参数:
##### `socket_ping`
参数: 无
当从服务器接收到ping数据包时触发

##### `socket_pong`
参数: `ms` (Number) 自ping数据包以来经过的毫秒数 即等待时间
当从服务器接收到一个Pong时触发


注意: 此插件基于socket.io-client封装,在使用的时候一定要注意前后端的socket.io-client版本
如果自行升级了socket.io-client版本请注意查阅一下官方文档,3.x以上的版本有个别事件已删除
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@
"@babel/preset-env": "^7.1.0",
"babel-loader": "^8.0.4",
"cross-env": "^5.2.0",
"vue": "^2.6.12",
"vuex": "^3.6.2",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2"
}
Expand Down
10 changes: 5 additions & 5 deletions src/emitter.js
Original file line number Diff line number Diff line change
Expand Up @@ -92,14 +92,14 @@ export default class EventEmitter{
dispatchStore(event, args){

if(this.store && this.store._actions){

let prefixed_event = this.actionPrefix + event;
//
let prefixed_event = this.actionPrefix.toLowerCase() + event;

for (let key in this.store._actions) {

let action = key.split('/').pop();

if(action === prefixed_event) {
if(action.replace("_", "").toLowerCase() === prefixed_event.replace("_", "")) {

Logger.info(`Dispatching Action: ${key}, Data:`, args);

Expand All @@ -110,14 +110,14 @@ export default class EventEmitter{
}

if(this.mutationPrefix) {

// Converting native lowercase event names to uppercase is more Vuex compliant
let prefixed_event = this.mutationPrefix + event;

for (let key in this.store._mutations) {

let mutation = key.split('/').pop();

if(mutation === prefixed_event) {
if(mutation.replace("_", "").toLowerCase() === prefixed_event.replace("_", "")) {

Logger.info(`Commiting Mutation: ${key}, Data:`, args);

Expand Down