vue 使用 vue-socket.io档冬，nodejs 使用 socket.io 實(shí)現(xiàn)簡(jiǎn)單聊天室
vue 前端頁(yè)面
首先 npm install vue-socket.io -S 下載組件
// main.js
import scoket from "vue-socket.io"; // 引入組件
Vue.use(new scoket({
debug: true, // 開啟提示
connection: url, // 后臺(tái)服務(wù)地址
}))
// speak.vue
mounted(){
this.$socket.emit("connection",1);
},
methods: {
sendMessage(val) {
this.$socket.emit("chatmessage", {name:val,value:this.value});
this.value = "";
},
},
sockets: { // 名字不能改膘茎，服務(wù)觸發(fā)方法的列表
connect() {
//與socket.io連接后回調(diào)
console.log("socket connected");
},
// user 名字，與服務(wù)端保持一致捣郊，data 后臺(tái)返回?cái)?shù)據(jù)
user(data) {
// 執(zhí)行的操作
this.message.splice(this.message, 0, data);
}
}
----------------------------- node.js -------------------------------------
import koa from 'koa'
const app = new koa()
const server = app.listen(4000);
const io = require('socket.io').listen(server);
io.sockets.on('connection', (socket) => {
console.log('連接成功', { id: socket.id })
socket.on('chatmessage', (msg) => {
io.sockets.connected[socket.id].emit('user', msg.value); // 指定發(fā)送
socket.emit('user', msg.value); // 廣播
});
socket.on('disconnect', () => { // 關(guān)閉鏈接的時(shí)候會(huì)執(zhí)行
console.log('user disconnected');
});
});
大概就是這樣子吧辽狈，不太完善，不過(guò)可以特別簡(jiǎn)單的用
