Vue+node 搭建聊天室

1. 使用node搭建socket服务器

// 加载 express
const express = require('express')
// 加载 socket.io
const socketIo = require('socket.io')
// 加载 http
const http = require('http')
// 创建 app
const app = express()
// 创建 server
const server = http.createServer(app)
// 创建 sokcet
const io = socketIo(server)
// 保存用户
const users = []
// 当客户端连接时
io.on('connection', socket => {
  console.log('client is connect')
  // 注册登录事件
  socket.on('login', users => {
    console.log(users)
    // 发布登录成功事件 并发送消息
    socket.emit('loginSucess', '登录成功')
  })
})
// 监听端口
server.listen(8989, () => {
  console.log('Server is running……')
})

2. 在Vue中使用socket.io

2.1 使用npm下载socket.io

npm install --save socket.io-client

2.2 在项目中引用

创建一个js文件并将此文件引入到项目的main.js文件中

// 引入 socket.io
import socketio from 'socket.io-client'
// 连接服务器
const io = socketio('http://127.0.0.1:8989')

export default io

在main.js 中引入创建的文件,并将其定义到vue的原型中, 即可通过this.$sockets 调用socket

import socketio from './socket'
Vue.prototype.$sockets = socketio

2.3 在项目中使用

向服务器发布事件,通过this.$sockets.emit('evts', ...args) 


向服务器订阅事件, 通过this.$sockets.on('evts', callback) 订阅事件





参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

g1531997389

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值