devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

SpringBoot+webSocket项目私信聊天功能实现_私信功能实现

作者：小蓝xlanll | 2024-06-12 05:22:52

赞

踩

私信功能实现

webSocket

        什么是ws？

         WS（WebSocket）是一种网络通信协议，它提供了在客户端和服务器之间进行双向、实时通信的能力。相比于传统的HTTP协议，WebSocket具有更低的延迟和更高的效率。

传统的HTTP协议是一种无状态的协议，每次通信都需要客户端发起请求，服务器响应后关闭连接，因此无法实现实时的双向通信。而WebSocket协议则在初始握手阶段首先通过HTTP协议建立连接，然后升级为双向通信的WebSocket连接。一旦建立了WebSocket连接，客户端和服务器就可以通过该连接进行实时的数据交换，而无需每次都重新建立连接。

WebSocket协议使用基于帧的消息传递机制，允许客户端和服务器以消息的形式进行通信。客户端可以发送消息给服务器，服务器也可以主动推送消息给客户端，实现了真正的双向通信。这种实时通信的特性使得WebSocket在许多场景下非常有用，例如在线聊天应用、实时数据监控和游戏等。

SpringBoot集成WebSocket

        在Java项目中的pom.xml文件中导入依赖wzbsocket依赖

  1.    <dependency>
  2.         <groupId>org.springframework.boot</groupId>
  3.         <artifactId>spring-boot-starter-websocket</artifactId>
  4.     </dependency>

     导入websocket配置文件注册成为一个工具类，交给ioc管理。加载websocket

  1.  
  2. import org.springframework.context.annotation.Bean;
  3. import org.springframework.context.annotation.Configuration;
  4. import org.springframework.web.socket.server.standard.ServerEndpointExporter;
  5.  
  6. /**
  7.  * 开启WebSocket支持
  8.  * @author wzk
  9.  */
  10. @Configuration  
  11. public class WebSocketConfig {  
  12. 	
  13.     @Bean  
  14.     public ServerEndpointExporter serverEndpointExporter() {  
  15.         return new ServerEndpointExporter();  
  16.     }  
  17.   
  18. }

        加载业务逻辑

websocket方法：

      @ServerEndpoint(value = "/chat/{username}")：用于建立连接路径，username表示当前连接的用户（前端的连接 路径为：ws：//localhost：端口号/chat/当前连接用户）

     @Component：当前类注入ioc管理对方

     @OnOpen：用户发送请求触发函数方法

     @PathParam（"name"）：将用户请求路径中的 参数注入到该方法的参数上面

     @OnError ： 用户请求连接异常触发函数

     @OnMessage:用户客户端*（前端）项目服务端（后端）发送信息触发函数

     @OnClose : 用户关闭连接触发函数

      发送消息方法sendMessage ：toSession.getBasicRemote().sendText(msg)：通过toSession的getBasicRemote()方法获取到与目标会话关联的RemoteEndpoint.Basic对象，通过调用sendText(msg)方法发送文本消息。sendText方法是WebSocket API提供的方法，用于发送文本消息至远程端点。

  1.  
  2. import com.alibaba.fastjson.JSON;
  3. import com.hqyj.project.pojo.Message;
  4. import com.hqyj.project.utils.ApplicationContextUtil;
  5. import lombok.extern.slf4j.Slf4j;
  6.  
  7. import org.springframework.data.redis.core.RedisTemplate;
  8. import org.springframework.stereotype.Component;
  9.  
  10. import javax.websocket.*;
  11. import javax.websocket.server.PathParam;
  12. import javax.websocket.server.ServerEndpoint;
  13. import java.io.IOException;
  14. import java.util.List;
  15. import java.util.concurrent.ConcurrentHashMap;
  16.  
  17. @ServerEndpoint(value = "/chat/{username}")
  18. @Component
  19. @Slf4j
  20. public class SocketServer {
  21.  
  22.  
  23.     // 保存链接的session，key为用户名,value为对应的session名
  24.     private static ConcurrentHashMap<String, Session> sessionMap = new ConcurrentHashMap<>();
  25.  
  26.     /**
  27.      * 创建连接
  28.      * 用于监听建立连接，当有客户端与该服务端点建立连接时，将会自回调该注解标注的方法
  29.      * @param session
  30.      * @param username
  31.      */
  32.     @OnOpen
  33.     public void onOpen(Session session, @PathParam(value = "username") String username) {
  34.         log.info("用户{}已创建连接", username);
  35.         String key = "webSocket:"+username;
  36.         sessionMap.put(username,session);
  37.         //获取redis对象
  38.         RedisTemplate redisTemplate =(RedisTemplate)ApplicationContextUtil.getBean("redis");
  39.         //判断是否为空
  40.         List<String> members = redisTemplate.opsForList().range(key,0,-1);
  41.         if (null != members && !members.isEmpty()){
  42.             for (String message : members) {
  43.                 Session toSession = sessionMap.get(username);
  44.                   //发送缓存信息
  45.                 sendMessage(toSession,message);
  46.             }
  47.             //删除redis中的键
  48.             redisTemplate.delete(key);
  49.         }
  50.     }
  51.  
  52.  
  53.     /**
  54.      * 用于监听客户端向服务端发送消息，当客户端与服务端发送消息时，将会回调该注解标注的方法
  55.      * @param msg
  56.      * @param username
  57.      */
  58.     @OnMessage
  59.     public void onMessage(String msg,@PathParam(value = "username") String username){
  60.         log.info("用户{}发来消息:{}",username,msg);
  61.         //解析用户发送的信息，使用系列化，映射到Message类
  62.         Message message = JSON.parseObject(msg, Message.class);
  63.         //使用工具类获取redis缓存数据库
  64.         RedisTemplate redisTemplate =(RedisTemplate)ApplicationContextUtil.getBean("redis");
  65.         //根据message中的to属性获取接收消息的用户的session，利用其session将消息转发过
  66.         if (null == sessionMap.get(message.getTo())){   //发送给的用户为空
  67.             //存入redis
  68.             redisTemplate.opsForList().rightPush("webSocket:"+message.getTo(),message.getMsg());
  69.             return;
  70.         }
  71.         Session toSession = sessionMap.get(message.getTo());
  72.         //发送信息给用户
  73.         sendMessage(toSession, message.getMsg());
  74.     }
  75.  
  76.  
  77.     /**
  78.      * 用于监听连接关闭，当客户端与该服务端点断开连接时，将会回调该注解标注的方法
  79.      * @param session
  80.      * @param username
  81.      */
  82.     @OnClose
  83.     public void onClose(Session session, @PathParam(value = "username") String username){
  84.         log.info("用户{}已关闭连接", username);
  85.         sessionMap.remove(username);
  86.     }
  87.  
  88.  
  89.     /**
  90.      * 用于监听该连接上的任何错误，当客户端与该服务端点的连接发生任何异常，都将回调该注解标注的方法
  91.      * 注意该方法的参数必选Throwable，可选Sessiion以及0-n个String参数，且String参数需要使用@PathParam注解标注
  92.      * @param throwable
  93.      * @param username
  94.      */
  95.     @OnError
  96.     public void onError(Throwable throwable,@PathParam(value = "username") String username){
  97.         log.error("用户{}连接发生异常", username);
  98.     }
  99.  
  100.  
  101.     /**
  102.      * 用来发送消息的方法，参数分别为接收消息的用户的session，和对应的消息
  103.      */
  104.     private void sendMessage(Session toSession,String msg){
  105.         try {
  106.             toSession.getBasicRemote().sendText(msg);
  107.         } catch (IOException e) {
  108.             throw new RuntimeException(e);
  109.         }
  110.     }
  111.  
  112.  
  113. }

前端Vue代码

        代码解析注释里面已经存在，就不过多阐述

  1. <template>
  2.   <div class="chat-container">
  3.     <div class="chat-header">
  4.       <span class="chat-header-text">{{ userFriend.userFriendNickname }}</span>
  5.     </div>
  6.     <div class="chat-messages">
  7.       <div v-for="message in messages" :key="message.id" class="chat-message">
  8.         <div v-if="message.email === user.email " class="chat-message-right">
  9.           <div class="chat-message-author">{{ message.nickName }}</div>
  10.           <div class="chat-message-avatar" :style="{ backgroundImage: `url(${message.cover})` }"></div>
  11.           <div class="chat-message-text">{{ message.text }}</div>
  12.         </div>
  13.         <div v-else class="chat-message-left">
  14.           <div class="chat-message-author">{{ message.nickName }}</div>
  15.           <div class="chat-message-avatar" :style="{ backgroundImage: `url(${message.cover})` }"></div>
  16.           <div class="chat-message-text">{{ message.text }}</div>
  17.         </div>
  18.       </div>
  19.       <div v-if="messages.length === 0" class="no-message-tip">暂无消息</div>
  20.     </div>
  21.     <div class="chat-input-container">
  22.       <input v-model="inputText" placeholder="输入消息" @keydown.enter="send" />
  23.       <button @click="send">发送</button>
  24.     </div>
  25.   </div>
  26. </template>
  27. <script>
  28.   // 创建websocket
  29.   let webSocket = null;
  30.  
  31.   export default {
  32.     name: "Chat",
  33.     data() {
  34.       return {
  35.         // toUser: "",
  36.         messages: [],
  37.         // userName: "",
  38.         inputText: "",
  39.         messageId: 1,
  40.         user:{
  41.           cover:"",
  42.           email:"",
  43.           nickName:""
  44.         },
  45.         userFriend:{
  46.           userEmail:"",
  47.           userFriendEmail:"",
  48.           userFriendNickname:"",
  49.           userFriendCover:""
  50.         }
  51.       };
  52.     },
  53.     methods: {
  54.       sendMessage(message) {         //当前账号发送信息
  55.         if (message !== "") {
  56.           this.messages.push({
  57.             id: this.messageId++,
  58.             email:this.user.email,           //当前账号
  59.             nickName: this.user.nickName,    //当前账号昵称
  60.             text: message,                   //当前发送的信息
  61.             cover: this.user.cover          //当前头像的url
  62.           });
  63.           // console.log(this.messages)
  64.           this.inputText = "";
  65.         }
  66.       },
  67.       responseMessage(message) {         //响应信息
  68.         if (message !== "") {
  69.           this.messages.push({
  70.             id: this.messageId++,
  71.             email:this.userFriend.userFriendEmail,
  72.             nickName: this.userFriend.userFriendNickname,    //对方昵称
  73.             text: message,                   //对方发送的信息
  74.             cover: this.userFriend.userFriendCover          //对方头像的url
  75.           });
  76.           // console.log(this.messages)
  77.           this.inputText = "";
  78.         }
  79.       },
  80.       connectWebSocket() {       //获取链接
  81.         const userName = this.user.email;      //当前账号
  82.         console.log(this.userFriend)
  83.         const target = "ws://localhost:8081/chat/" + userName;
  84.         if ("WebSocket" in window) {         //判断浏览器是否支持，创建websocket对象
  85.           webSocket = new WebSocket(target);
  86.         } else {
  87.           alert("浏览器不支持websocket");
  88.         }
  89.  
  90.         webSocket.onerror = function () {
  91.           alert("发生错误连接失败");
  92.         };
  93.  
  94.         webSocket.onopen = function () {
  95.           console.log("连接成功");
  96.         };
  97.  
  98.         webSocket.onmessage = (res) => {
  99.           console.log(res)
  100.           this.responseMessage(res.data);     //res.data对方响应的信息
  101.         };
  102.  
  103.         webSocket.onclose = function () {
  104.           // this.sendMessage("Loc MSG:关闭连接");
  105.           console.log("关闭连接");
  106.         };
  107.  
  108.         window.onbeforeunload = function () {
  109.           webSocket.close();
  110.         };
  111.       },
  112.       closeWebSocket() {
  113.         webSocket.close();
  114.       },
  115.       send() {
  116.         const msg = this.inputText.trim();
  117.         if (msg !== "") {
  118.           const toUser = this.userFriend.userFriendEmail;
  119.           const chatMsg = {
  120.             msg: msg,
  121.             to: toUser
  122.           };
  123.           webSocket.send(JSON.stringify(chatMsg));
  124.           this.sendMessage(msg);
  125.         }
  126.       },
  127.       sendToUser() {
  128.         //获取当前用户账号和发送信息用户账号
  129.         this.user = JSON.parse(sessionStorage.getItem("user"));
  130.         // console.log(this.user)
  131.         const userFriend = JSON.parse(sessionStorage.getItem("userFriendEmail"));
  132.         // console.log(userFriend)
  133.         this.userFriend.userFriendEmail = userFriend.userFriendEmail;
  134.         this.userFriend.userFriendNickname = userFriend.userFriendNickname;
  135.         this.userFriend.userFriendCover = userFriend.userFriendCover;
  136.         // console.log(this.userFriend)
  137.       },
  138.     },
  139.     mounted() {
  140.       this.sendToUser();
  141.       this.connectWebSocket();
  142.     },
  143.   };
  144. </script>
  145.  
  146. <style scoped>
  147.   .chat-container {
  148.     width: 400px;
  149.     height: 500px;
  150.     border-radius: 5px;
  151.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  152.     display: flex;
  153.     flex-direction: column;
  154.   }
  155.  
  156.   .chat-header {
  157.     padding: 10px;
  158.     background-color: #1890ff;
  159.     color: #fff;
  160.     font-size: 18px;
  161.     font-weight: bold;
  162.     display: flex;
  163.     justify-content: center;
  164.     align-items: center;
  165.   }
  166.  
  167.   .chat-header-text {
  168.     width: 100%;
  169.     text-align: center;
  170.     white-space: nowrap;
  171.     overflow: hidden;
  172.     text-overflow: ellipsis;
  173.   }
  174.  
  175.   .chat-messages {
  176.     flex-grow: 1;
  177.     padding: 10px;
  178.     overflow-y: auto;
  179.     background-color: #f5f5f5;
  180.     border-top: 1px solid #ccc;
  181.     border-bottom: 1px solid #ccc;
  182.  
  183.   }
  184.  
  185.   .chat-message {
  186.     margin-bottom: 10px;
  187.   }
  188.  
  189.   .chat-message-left {
  190.     display: flex;
  191.     flex-direction: column;
  192.     align-items: flex-start;
  193.   }
  194.  
  195.   .chat-message-avatar {
  196.     /*变为行元素*/
  197.     display: inline;
  198.     width: 40px;
  199.     height: 40px;
  200.     background-size: cover;
  201.     background-position: center;
  202.     border-radius: 50%;
  203.     margin-right: 10px;
  204.   }
  205.  
  206.   .chat-message-author {
  207.     font-weight: bold;
  208.     margin-bottom: 5px;
  209.   }
  210.  
  211.   .chat-message-right .chat-message-text {
  212.     display: inline;
  213.     position:relative;
  214.     top: -40px;
  215.     right: 55px;
  216.     word-wrap: break-word;
  217.     max-width: 200px;
  218.     padding: 8px;
  219.     background-color: #fff;
  220.     border-radius: 5px;
  221.     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  222.   }
  223.   .chat-message-left .chat-message-text {
  224.     display: inline;
  225.     position:relative;
  226.     top: -40px;
  227.     right: -45px;
  228.     word-wrap: break-word;
  229.     max-width: 200px;
  230.     padding: 8px;
  231.     background-color: #fff;
  232.     border-radius: 5px;
  233.     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  234.   }
  235.  
  236.   .chat-message-right {
  237.     display: flex;
  238.     flex-direction: column;
  239.     align-items: flex-end;
  240.   }
  241.  
  242.   .chat-input-container {
  243.     display: flex;
  244.     align-items: center;
  245.     padding: 10px;
  246.     background-color: #f5f5f5;
  247.     border-top: 1px solid #ccc;
  248.   }
  249.  
  250.   .chat-input-container input {
  251.     flex-grow: 1;
  252.     height: 30px;
  253.     margin-right: 10px;
  254.     padding: 5px;
  255.     border-radius: 5px;
  256.     border: 1px solid #ccc;
  257.     outline: none;
  258.     font-size: 14px; /* 添加字体大小样式 */
  259.   }
  260.  
  261.   .chat-input-container button {
  262.     padding: 5px 10px;
  263.     background-color: #1890ff;
  264.     color: #fff;
  265.     border: none;
  266.     border-radius: 5px;
  267.     cursor: pointer;
  268.     outline: none;
  269.     font-size: 14px; /* 添加字体大小样式 */
  270.   }
  271.  
  272. </style>

成品图

        

完成全双关双向通信

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/706544
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号