# 单组件不用 vuex 的情况
# 后端 koa 代码
const socket = require("socket.io");
var http = require("http");
let io = null;
//可以http
var server = http.createServer(app.callback());
io = socket(server);
io.on("connection", function(socket) {
console.log("client connected"); //终端显示连接状态
socket.on("pingfen", data => {
console.log("客户端发送的内容：", data);
//返回发起方
socket.emit("getMsg", "我是返回的消息... 收到的分数为：" + data.fenshu);
//广播除发起方的所有连接方
socket.broadcast.emit(
"getMsg",
"我是返回的消息... 收到的分数为：" + data.fenshu
);
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 前端 vue 代码
main.js
import VueSocketIO from "vue-socket.io";
let mainUrl =
process.env.NODE_ENV === "production"
? "https://xxxxx.com:3007/"
: "http://localhost:3006/";
Vue.use(
new VueSocketIO({
debug: true,
connection: mainUrl
})
);
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
socket.vue
<template>
<div>
<div>{{ msg }}</div>
<el-button @click="sendData">发送数据</el-button>
</div>
</template>
<script>
export default {
sockets: {
connect: function() {
console.log("socket connected");
},
getMsg: function(value) {
console.log(value);
this.msg = value;
}
},
data() {
return {
msg: ""
};
},
methods: {
sendData() {
this.$socket.emit("pingfen", { fenshu: 5 });
}
}
};
</script>
<style></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# 使用 vuex 的情况
# 前端代码
main.js
import Vue from "vue";
import store from "./store";
import App from "./App.vue";
import VueSocketIO from "vue-socket.io";
Vue.use(
new VueSocketIO({
debug: true,
connection: "http://metinseylan.com:1992",
vuex: {
store,
actionPrefix: "SOCKET_",
mutationPrefix: "SOCKET_"
},
options: { path: "/my-app/" } //Optional options
})
);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
mutations: {
"<MUTATION_PREFIX><EVENT_NAME>"() {
// do something
}
},
actions: {
"<ACTION_PREFIX><EVENT_NAME>"() {
// do something
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18