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

聊天广场(Vue+WebSocket+SpringBoot)

作者：运维做开发 | 2024-07-07 10:28:21

赞

踩

聊天广场(Vue+WebSocket+SpringBoot)

由于心血来潮想要做个聊天室项目 ，但是仔细找了一下相关教程，却发现这么多的WebSocket教程里面，很多都没有介绍详细，代码都有所残缺，所以这次带来一个比较完整得使用WebSocket的项目。

目录

一、效果展示

二、准备工作

一、前端框架，Vue + elementUI组件 +JsCookie

二、后端 SpringBoot + websocket包

三、前端代码

四、后端代码

一、效果展示

1.用户交流

二、准备工作

一、前端框架，Vue + elementUI组件 +JsCookie

新建一个vue项目

引入以下组件与依赖

npm i element-ui -S
npm install js-cookie

二、后端 SpringBoot + websocket包

创建SpringBoot项目后

在pom.xml文件中引入以下依赖：

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

注意项目前端为8081端口，后端为8080端口，所以先运行后端再运行前端

三、前端代码

在App.vue中即可引入以下代码：

html:

  1. <template>
  2.  
  3.   <div id="Layout">
  4.     <el-container>
  5.       <el-aside width="200px">Aside</el-aside>
  6.       <el-container>
  7.         <el-header style="background-color: rgb(245, 245, 245); border-bottom: 1px solid grey;">
  8.           <h3>聊天广场</h3>
  9.         </el-header>
  10.  
  11.         <el-main style="background-color: rgb(244, 245, 247);
  12.         min-height: 700px; max-height: 700px; ">
  13.  
  14.           <div id="chatContent" style="padding-left: 10px; line-height: normal; ">
  15.             <!-- 循环输出对话内容 -->
  16.             <el-scrollbar v-for="(message, index) in messages" :key="index">
  17.               <div ref="scrollbar" v-if="message.sender !== senderName" class="chat-message" id="ChatContentCard" style=" background-color: white;
  18.               margin-top: 20px; 
  19.               box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)  
  20.               ">
  21.                 <el-avatar :size="40"
  22.                   src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
  23.                 <div class="message-content" style="width: 100%;">
  24.                   <div style="text-align: left; text-indent: 1em;"> {{ message.sender }}</div>
  25.                   <div id="chatContentText">{{ message.text }}</div>
  26.                 </div>
  27.               </div>
  28.  
  29.               <div ref="scrollbar" v-if="message.sender === senderName" id="myChatContentCard">
  30.                 <el-avatar :size="40"
  31.                   src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"></el-avatar>
  32.                 <div class="message-content" style="width: 100%;">
  33.                   <div style="text-align: left; text-indent: 1em;"> {{ message.sender }}</div>
  34.                   <div id="chatContentText">{{ message.text }}</div>
  35.                 </div>
  36.               </div>
  37.             </el-scrollbar>
  38.           </div>
  39.         </el-main>
  40.  
  41.  
  42.         <!-- 底层交互框 -->
  43.         <el-footer style="height: 190px; background-color: rgb(244, 245, 247); ">
  44.  
  45.           <div id="Gadget" style="background-color: rgb(244, 245, 247); height: 35px; margin-bottom: 10px;">
  46.  
  47.             <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
  48.               :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" style="float: left;">
  49.  
  50.               <el-button slot="trigger" size="small" type="primary"><i class="el-icon-picture-outline-round"></i></el-button>
  51.  
  52.               <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  53.               
  54.             </el-upload>
  55.  
  56.  
  57.           </div>
  58.  
  59.           <el-form @submit.native.prevent="sendMessage"
  60.             style="background-color: rgb(244, 245, 247); height: 80%; width: 100%; position: relative;">
  61.             <el-input v-model="messageInput" rows="4" resize="none" type="textarea" placeholder="请输入内容......."
  62.               @keyup.enter="sendMessage" style="height: 100%; max-height: 60px; ">
  63.             </el-input>
  64.             <div style="text-align: right; background-color: rgb(244, 245, 247); margin-top: 34px;">
  65.               <el-button type="primary" @click="sendMessage">发送</el-button>
  66.             </div>
  67.  
  68.           </el-form>
  69.         </el-footer>
  70.  
  71.  
  72.       </el-container>
  73.     </el-container>
  74.  
  75.   </div>
  76. </template>

script:

  1. <script>
  2. import Cookies from 'js-cookie';
  3.  
  4.  
  5. export default {
  6.   computed: {
  7.     senderName() {
  8.       return Cookies.get('account') || '游客';
  9.     }
  10.   },
  11.   name: 'App',
  12.   data() {
  13.     return {
  14.       messages: [],
  15.       messageInput: '',
  16.       ws: null,
  17.       fileList: []
  18.     };
  19.   },
  20.   mounted() {
  21.     this.initWebSocket();
  22.   },
  23.   beforeDestroy() {
  24.     this.closeWebSocket();
  25.   },
  26.   methods: {
  27.     initWebSocket() {
  28.       this.ws = new WebSocket('ws://localhost:8080/chat');
  29.       this.ws.onopen = () => {
  30.         console.log('Connected to server.');
  31.       };
  32.       this.ws.onmessage = (event) => {
  33.         try {
  34.           let messageData;
  35.           if (isJson(event.data)) {
  36.             messageData = JSON.parse(event.data);
  37.           } else {
  38.             messageData = { text: event.data };
  39.           }
  40.           this.messages.push({
  41.             sender: messageData.sender || 'Anonymous',
  42.             text: messageData.text,
  43.           });
  44.  
  45.           // 使用Vue.nextTick确保DOM更新后再执行滚动操作
  46.           this.$nextTick(() => {
  47.             // 确保scrollbar存在且已渲染
  48.             if (this.$refs.scrollbar) {
  49.               // 直接滚动到底部，不需要使用contentSize
  50.               // this.$refs.scrollbar.$el.scrollTop = this.$refs.scrollbar.$el.scrollHeight;
  51.             }
  52.           });
  53.         } catch (error) {
  54.           console.error('Error parsing message:', error);
  55.         }
  56.  
  57.       };
  58.  
  59.  
  60.       // 辅助函数，检查字符串是否可能是JSON格式
  61.       function isJson(str) {
  62.         try {
  63.           JSON.parse(str);
  64.         } catch (e) {
  65.           return false;
  66.         }
  67.         return true;
  68.       }
  69.  
  70.  
  71.       this.ws.onerror = (error) => {
  72.         console.error('WebSocket error:', error);
  73.       };
  74.       this.ws.onclose = () => {
  75.         console.log('Disconnected from server.');
  76.       };
  77.     },
  78.     sendMessage() {
  79.       console.log('调用sendMessage');
  80.       const senderName = Cookies.get('account');
  81.       if (senderName === null) {
  82.         this.senderName = "游客";
  83.       }
  84.       if (this.messageInput.trim() !== '') {
  85.         this.ws.send(JSON.stringify({ sender: senderName, text: this.messageInput }));
  86.         this.messageInput = ''; // 清空输入框
  87.       }
  88.     },
  89.     closeWebSocket() {
  90.       if (this.ws && this.ws.readyState === WebSocket.OPEN) {
  91.         this.ws.close();
  92.       }
  93.     },
  94.  
  95.  
  96. // 文件上传函数
  97. submitUpload() {
  98.         this.$refs.upload.submit();
  99.       },
  100.       handleRemove(file, fileList) {
  101.         console.log(file, fileList);
  102.       },
  103.       handlePreview(file) {
  104.         console.log(file);
  105.       }
  106.  
  107.  
  108.   },
  109. };
  110. </script>

css:

  1. <style scoped>
  2. .chat-message {
  3.   display: flex;
  4.   align-items: center;
  5.   margin-bottom: 10px;
  6. }
  7.  
  8. .message-content {
  9.   margin-left: 10px;
  10. }
  11.  
  12. #Layout {
  13.   line-height: normal;
  14. }
  15.  
  16. /* 添加动画关键帧 */
  17. @keyframes slideInFromLeft {
  18.   0% {
  19.     transform: translateX(-100%);
  20.     opacity: 0;
  21.   }
  22.  
  23.   100% {
  24.     transform: translateX(0);
  25.     opacity: 1;
  26.   }
  27. }
  28.  
  29. #ChatContentCard {
  30.   min-height: 80px;
  31.   width: 50%;
  32.   /* 应用动画 */
  33.   animation: slideInFromLeft 0.3s ease-in-out forwards;
  34.   border-radius: 30px
  35. }
  36.  
  37. #chatContentText {
  38.   width: 99%;
  39.   overflow-wrap: break-word;
  40.  
  41. }
  42.  
  43.  
  44. .el-header,
  45. .el-footer {
  46.   background-color: #B3C0D1;
  47.   color: #333;
  48.   text-align: center;
  49.   line-height: 60px;
  50. }
  51.  
  52. .el-aside {
  53.   background-color: #D3DCE6;
  54.   color: #333;
  55.   text-align: center;
  56.   line-height: 200px;
  57. }
  58.  
  59. .el-main {
  60.   background-color: #E9EEF3;
  61.   color: #333;
  62.   text-align: center;
  63.   line-height: 160px;
  64. }
  65.  
  66. body>.el-container {
  67.   margin-bottom: 40px;
  68. }
  69.  
  70. .el-container:nth-child(5) .el-aside,
  71. .el-container:nth-child(6) .el-aside {
  72.   line-height: 260px;
  73. }
  74.  
  75. .el-container:nth-child(7) .el-aside {
  76.   line-height: 320px;
  77. }
  78.  
  79.  
  80. #myChatContentCard{
  81.   display: flex;
  82.   align-items: center;
  83.   margin-bottom: 10px;
  84.   margin-left: 50%;
  85.  
  86.   min-height: 80px;
  87.   width: 50%;
  88.   /* 应用动画 */
  89.   animation: slideInFromRight 0.3s ease-in-out forwards;
  90.   border-radius: 30px;
  91.  
  92.   background-color: rgb(149, 236, 105);
  93.               margin-top: 20px; 
  94.               box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) 
  95.  
  96. }
  97.  
  98. @keyframes slideInFromRight {
  99.   0% {
  100.     transform: translateX(100%);
  101.     opacity: 0;
  102.   }
  103.  
  104.   100% {
  105.     transform: translateX(0);
  106.     opacity: 1;
  107.   }
  108. }
  109.  
  110.  
  111. </style>

注意： 这个项目中如果script需要进行修改，由于我这里完成了一个登陆系统，所以采用了对Cookie的使用，而如果只是体验的话，只需要把Cookie去掉将其改为游客+随机字符串去替代即可。

前端启动

npm run serve

四、后端代码

WebSocket配置：

1.WebSocketConfig.java

  1. @Configuration
  2. @EnableWebSocket
  3. public class WebSocketConfig implements WebSocketConfigurer {
  4.  
  5.     @Override
  6.     public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
  7.         registry.addHandler(new ChatWebSocketHandler(), "/chat").setAllowedOrigins("*");
  8.     }
  9. }

 2.ChatWebSocketHandler.java

  1. @Slf4j
  2. public class ChatWebSocketHandler extends TextWebSocketHandler {
  3.  
  4.     private static final Set<WebSocketSession> sessions = Collections.synchronizedSet(new HashSet<>());
  5.  
  6.     @Override
  7.     public void afterConnectionEstablished(WebSocketSession session) throws Exception {
  8.         sessions.add(session);
  9.         broadcast("欢迎新的小伙伴加入");
  10.     }
  11.  
  12.     @Override
  13.     protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
  14.         broadcast(message.getPayload());
  15.     }
  16.  
  17.     private void broadcast(String message) {
  18.         log.info("服务器广播数据："+message);
  19.         sessions.forEach(session -> {
  20.             try {
  21.                 session.sendMessage(new TextMessage(message));
  22.             } catch (Exception e) {
  23.                 e.printStackTrace();
  24.             }
  25.         });
  26.     }
  27.  
  28.     @Override
  29.     public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
  30.         sessions.remove(session);
  31.  
  32.     }
  33. }

 后端启动：

 

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

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

  

闽ICP备14008679号