vue 使用 socket 实现即时通讯
安装依赖npm install -S vue-socket.io// 测试安装的版本是 "vue-socket.io": "^3.0.10"main.js 引用import VueSocketIO from 'vue-socket.io'Vue.use(new VueSocketIO({// 控制台调试 console.logdebug: true,// 连接地址 后端提供connection:
·
-
安装依赖
npm install -S vue-socket.io
-
main.js 引用
import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ // 控制台调试 console.log debug: true, // 连接地址 后端提供 connection: 'http://localhost:3000', // vuex,不需要则不加 vuex: { store, mutationPrefix: "SOCKET_", actionPrefix: "SOCKET_" } }))
-
页面使用
- 在 data、mounted、methods 同级加上 sockets 对象
sockets: { // 链接成功 connect(data) { console.log(data) }, // 发送消息 toServer(data) { this.$socket.emit('toServer', data) }, // 接收消息 toClient(data) { this.msgList.push(data) }, // 断开链接回调 disconnect() { console.log('disconnect:', '已经断开 socket 链接') }, // 重新连接 reconnect() { // 自动执行,直到链接成功 this.$socket.emit('connect') } }
-
服务端代码 ( node.js 为例 )
'use strict' const http = require('http') const app = http.createServer(function (req, res) { res.end(data) }) const io = require('socket.io')(app) // 3.建立链接 io.on('connection', function (socket) { // 服务器获取客户端发送的数据 socket.on('toServer', function (data) { console.log(data) socket.emit('toClient', '我是服务器的数据') }) }) /** * 以下是服务器给客户端发送数据的两种方式 * 1, socket.emit()=>谁给我发信息我把信息发送给谁 * 2, io.emit()=>群发给所有连接服务器的客户都广播数据 */ app.listen(3000)
更多推荐
已为社区贡献1条内容
所有评论(0)