基于vue+koa2+socket.io实现多人在线实时聊天

前几天在网上看到了关于websocket的一些视频教程,所以就在学习了以后做了这个项目,总结一下在做这个项目过程中遇到的一些问题

效果图

图片经过压缩,展示效果不是很好

 

 

关于socket通信的简单说明

Socket是在应用层和传输层之间的一个抽象层,它把TCP/IP层复杂的操作抽象为几个简单的接口,供应用层调用实现进程在网络中的通信(来源百科)。它是一种全双工(服务端与客户端可同时收发消息)通信,当有数据更新时服务端可以主动的将消息推送到客户端。

Socket通信的运行流程如下

1、服务端启动Socket监听端口,监听是否有客户端连接进来,即Watch Socket;

2、客户端通过http协议发送请求报文,服务端响应请求后会将协议升级为WebSocket,并创建一个新>的Socket对象,客户端Socket随即与服务端Socket进行连接和通信,且客户端不再与Watch Socket通信;

3、Watch Socket继续监听是否有其它客户端连接。

项目地址

基于vue+koa2+socket.io实现多人在线实时聊天(客户端)

后端

技术栈

  • node
  • koa2
  • socket.io

socket.io的使用

socket.io提供了基于事件的实时双向通讯,它同时提供了服务端和客户端的API。

服务端

服务端socket.io必须绑定一个http.Server实例,因为WebSocket协议是构建在HTTP协议之上的,所以在创建WebSocket服务时需调用HTTP模块并调用其下createServer()方法,将生成的server作为参数传入socket.io。

 

var httpServer = require('http').createServer();

var io = require('socket.io')(httpServer);

httpServer.listen(3000);

项目代码

socket.on( ) :订阅一个事件
socket.emit( ) : 告诉当前用户
io.emit( ) : 广播事件

const Koa = require("koa")

const app = new Koa()

const cors = require("koa2-cors")

 

// 解决跨域

app.use(cors())

 

//核心,初始化app作为HTTP 服务器的回调函数像express这么写mac电脑会有问题,无法访问

// const server = require('http').Server(app);  //express写法

const server = require('http').Server(app.callback());  //koa正确姿势

const io = require('socket.io')(server); //核心,实现客户端之间交互通信

 

let users = []  //存储所有用户的数组

 

io.on("connection", socket => {

    socket.on("submit", (data) => {

        let result = users.find(item => {

            return item.userName == data.userName

        })

        socket.emit("login", result)

        if (!result) {

            // 存储当前登陆用户的信息

            socket.userName = data.userName

            socket.avatar = data.avatar

 

            // 加入到用户数组

            users.push(data)

            socket.emit("loginSuccess", data)

 

            io.emit("addUser", data)

            io.emit("userList", users)

        }

    })

 

    //发送信息

    socket.on("sendMsg", data => {

        io.emit("sendAll", data)

    })

 

    //发送图片

    socket.on("sendFile", data => {

        io.emit("sendFileAll", data)

    })

 

    // 用户断开连接的时候

    socket.on('disconnect', () => {

        // 把当前用户的信息从users中删除掉

        let idx = users.findIndex(item => item.userName === socket.userName)

        // 删除掉断开连接的这个人

        users.splice(idx, 1)

        // 1. 告诉所有人,有人离开了聊天室

        io.emit('delUser', {

            userName: socket.userName,

            avatar: socket.avatar

        })

        // 2. 告诉所有人,userList发生更新

        io.emit('userList', users)

    })

})

 

server.listen(3000, () => {

    console.log(`监听地址: http://localhost:3000`);

})

前端

技术栈

  • vue
  • vue-socket.io
  • scss

vue-socket.io

vue-socket.io使用

socket.io 的github地址

安装

npm install vue-socket.io --save

 

引入

//main.js

import VueSocketIO from 'vue-socket.io'

 

Vue.use(new VueSocketIO({

  debug: true, //设置true可以让你的控制台文字变颜色,更好的调试阅读

  connection: 'http://localhost:3000',

}))

 

vue-socket.io订阅事件

注意:这段代码是和你的methods、mounted等生命周期同级的
(vue-socket.io 3.0.9版本因为出现了无法触发sockets里订阅的事件的bug,所以尽量不要使用3.0.8,和3.0.9版本的,也有解决办法,后面会讲)

sockets:{

    connect(data){

      if(data){

        console.log('连接成功',data)

        this.$socket.emit("users")

      }

    },

    users(data){

      console.log("在线人数",data)

      this.userNmber = data;

    },

    reconnect(data){

      console.log('重新连接',data)

    },

    disconnecting(data){

      console.log('socket已断开连接');

      this.$socket.emit("users")

    },

    getMsg(data){

      console.log("后端传过来的消息",data)

      this.speak = data

    }

  }

关于 vue-socket.io 3.0.8版本和3.0.9版本存在的bug

在 vue-socket.io 3.0.9 版本中会出现无法接收到信息的 bug (也就是你在 sockets中定义的方法是没有办法触发的) ,关于这个问题我们可以通过以下方法解决

方法一: this.sockets.listener.subscribe

this.sockets.listener.subscribe("事件名", (参数) => {

    //逻辑

})

方法二 :使用 socket.io-client

import io from 'socket.io-client'

export default {

  mounted() {

    io('http://127.0.0.1:8080').on('hi', (res) => {

      console.log('socket.io-client', res)

    })

  },

}

以上两种解决办法可以文章 :vue-socket.io3.08,3.09有bug接收不到数据

方法三:回退版本到 3.0.7

这个版本是不存在该bug的

vue 渲染页面后div的滚动条保持在最底部的方法

因为在用户发送信息时,我们需要实时查看到最新的休息,所以需要让滚动条保持到最底部,在网上查看了好几种方法,但是在vue中还是有些不太适用,但是还是记录下来

关于$nextTick

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM

方式一:

 

//每次页面渲染完之后滚动条在最底部

updated:function(){

    this.$nextTick(function(){

    var p = document.getElementById('dialogue_box');

    p.scrollTop = p.scrollHeight;

    })

  }

方式二:

亲测该方法在发送图片时会有bug

//processData 是双向绑定的数据

watch: {

    'processData': 'scrollToBottom'

  }

  methods:{

   scrollToBottom: function () {

    this.$nextTick(() => {

      var div = document.getElementById('data-list-content')

      div.scrollTop = div.scrollHeight

    })

   }

  }

转自http://www.yemengs.cn/article?id=5ecb913c401f514d37d6e0d4&distance=0&page=2

 

 

 

 

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

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值