Websocket实现发送群聊信息

NooB .

已于 2023-12-30 18:00:47 修改

阅读量212

点赞数 1

文章标签： websocket 网络协议网络

于 2023-12-19 16:52:24 首次发布

本文链接：https://blog.csdn.net/KKKKKyh/article/details/135087689

版权

本文介绍了如何在后端使用socket.io与前端Vue.js配合，实现用户间的即时通讯和群聊功能，包括用户连接、消息广播、私聊以及前端的基本交互设计。作者还分享了项目中遇到的问题和收获，强调了网络程序设计课程对Web应用开发的重要性。

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

配置

后端使用socket.io，前端使用vue，实现用户与用户之间的通讯，以及群聊功能的实现

Socket.io介绍

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

上述代码用于模拟用户登录时的状态，当用户登录上3000端口，将打印a user connected。

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();

  var form = document.getElementById('form');
  var input = document.getElementById('input');

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    if (input.value) {
      socket.emit('chat message', input.value);
      input.value = '';
    }
  });
</script>

上述代码时官网给出的建议的前端模块，用于接收用户输入的信息，如果submit被触发，那么将会调用emit中的chat message事件。

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
  });
});

此时控制台会输出input中的信息。
那么根据socket.io的引导，如何实现广播也呼之欲出了。

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

那么实现私聊功能，即调用io.to()即可

socket.on('privateChat',data=>{
        io.sockets.sockets.forEach(iss=>{
            if(iss.name==data.receiver){
                data.type='user';
                io.to(iss.id).emit('updateChatMessageList',data);
            }
        });
    });

前端介绍

由于本人不会前端，本项目前端界面参考这里。
前端所做的主要工作为：1. 用户认证与登录：在用户访问聊天室前，需要进行用户认证和登录。这可以通过用户名和密码等凭证来实现。你可以使用Vue.js的路由守卫等机制来确保用户在未登录的情况下无法访问聊天室。
2. Socket.io连接：使用Vue.js中的生命周期钩子或，初始化Socket.io连接。在连接建立后，服务器将生成一个唯一的用户标识符，并将其发送回客户端。
3. 存储用户ID：将接收到的用户ID存储在Vue组件的数据中，以便后续使用。可以使用Vue的data属性来管理组件的状态。
4. 用户进入聊天室：当用户进入聊天室时，需要发送存储的用户ID到服务器，以便服务器能够识别用户。可以在Vue组件的方法中处理用户进入聊天室的逻辑。
5. 其他初始化操作：在接收到用户ID后，还需要执行一些其他的初始化操作，例如获取用户的个人信息、加载聊天记录等。

项目展示

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/926bc3bfde514cb0978fc379343cda5c.png

在这里插入图片描述

一个简易的聊天室就完成了。

项目的不足和展望

项目的简易实现存在一个问题，那就是刷新的时候会重新回到注册界面。这与socket.io的机制有关，因此设想添加session实现再次登录可识别用户的功能，但经过长时间的尝试和查阅资料，再加上自己的底子较差，无从下手，遂只能以该项目收尾。

收获

学完网络程序设计课程之后，我深感受益匪浅，对于网络应用的开发和设计有了更深入的了解。通过学习课程，我对网络架构有了更全面的理解，包括客户端和服务器之间的通信机制、数据传输协议、以及常见的网络安全问题。这使我能够更好地设计和构建复杂的网络应用。
前后端分离的实践：课程中的实践项目让我深入体验了前后端分离的开发模式。使用Vue.js作为前端框架和Socket.io处理实时通信，我学到了如何通过RESTful API设计和WebSocket建立双向通信，这在现代Web应用中变得越来越重要。通过实践项目，我对Vue.js的组件化开发、状态管理等概念有了更深刻的认识。这些知识不仅使我能够更高效地构建用户界面，还为我在前端领域的深入学习奠定了基础。课程中涉及了实时通信的相关技术，如WebSocket和Socket.io。这使我能够设计具有实时互动功能的应用，例如聊天室或协作工具，为用户提供更流畅的体验。网络程序设计是一个快速发展的领域，课程中所学只是冰山一角。通过这门课程，我培养了自主学习和解决问题的能力，学会了查阅文档、阅读源代码等重要的技能。

总的来说，网络程序设计课程让我更深入地了解了现代Web应用的开发，培养了我在前后端开发、实时通信、团队协作和安全性方面的技能。这将对我的未来职业发展产生积极的影响，使我更有信心地面对复杂的网络应用开发任务。