vuex+socket.io实现实时私聊功能

最新推荐文章于 2023-07-12 19:27:51 发布

62921

最新推荐文章于 2023-07-12 19:27:51 发布

阅读量1.8k

点赞数 1

分类专栏：项目文章标签： socket.io vue vuex

本文链接：https://blog.csdn.net/qq_40409571/article/details/84392107

版权

本文通过示例介绍了如何结合vue、vuex与socket.io实现实时私聊功能，包括服务端express的设置、客户端的连接、vuex状态管理以及关键代码的解析。提供了一个在线预览的移动端demo，并给出了github源码链接，欢迎star支持。

摘要由CSDN通过智能技术生成

先上效果图

预览

在线demo VueSocial（移动端最好使用浏览器打开，pc端按了f12后有个小问题，刷新一下就好,resize触发的问题，待改进）
如果想自己试验下可以打开两个浏览器进行聊天

github地址

引入socket. io

服务端:


  let serve = app.listen(3001);

  const io = socketio(serve);

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

    socket.on('login', (username) => {

                console.log(username+'上线了！');

            });

  }

客户端:

在index中引入

<script src="http://47.107.66.252:3001/socket.io/socket.io.js"></script>

    <script type="text/javascript">

      const socket = io.connect('http://47.107.66.252:3001');

    </script>