一个基于 Spring Cloud + Vue + Socket.IO 的在线聊天网站，不来体验一下吗？

已于 2023-08-20 13:15:39 修改
阅读量1.6k 收藏 9
点赞数 5
分类专栏： 日常记录 Vue 3 开发环境搭建 文章标签： spring cloud vue java 前端 后端
于 2022-08-01 09:23:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49523761/article/details/126093471
版权

前言

2022年8月1日，经过一系列的准备工作，这个充满 BUG 的神奇网站在今天发布上线了。因为网站目前的主要功能是在线聊天，所以暂且就先叫它 EasyChat 吧。

EasyChat 是一个可以在线聊天的即时通讯平台，完全由个人设计和开发，初衷主要是觉得好玩儿，顺便学习一些新东西，所以网站有些简陋，属实是本人的能力和财力有限。网站没有任何付费内容，所有内容完全免费，欢迎大家使用体验，也期待大佬们的交流与反馈。

体验地址：https://toollong.icu（网站已于 2023.08.18 下线，运行时长 382 天）

注意： 本网站仅供学习交流使用，由于网站的安全保障和加密措施并不完善，请勿在网站中输入敏感信息，避免信息泄露的风险。

功能介绍（v1.0.1）

关于功能的具体实现由于内容太多，就不在这里详细阐述了，可以去看一下源码，有什么疑问和建议也可以随时交流。下面是已经实现的功能：

  • 注册
  • 登录
  • 找回密码
  • 添加聊天
  • 删除聊天
  • 发送文本消息
  • 发送 Emoji 表情（Windows 7 可能无法正常显示）
  • 发送图片（批量发送）
  • 发送文件（同步发送，有点慢）
  • 新消息通知（有提示音）
  • 搜索用户
  • 修改好友备注
  • 好友申请
  • 好友验证
  • 好友删除（单向删除）
  • 验证消息通知（有提示音）
  • 查看资料
  • 编辑资料
  • 设置（头像、隐身、标签、修改密码）
  • 夜间模式
  • 小抽屉（搜一搜、日历）

技术栈（v1.0.1）

  • 前端使用 Vue CLI 开发，后端使用 Java 开发。

  • 前端：Vue 3、Vue Router、Vuex、Element Plus、Socket.IO、Axios、VueUse…

  • 后端：Spring Cloud、Nacos、MyBatis-Plus、Netty-socketio、MinIO、Gson、MySQL、Redis、Docker…

源码

前端代码

后端代码

toollong
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论
专栏目录
Spring Cloud + Nacos 集成Netty Socket.IO
风之飘渺
03-11 857
项目需要集成实时消息通讯，所以尝试在项目中集成websocket。技术上选择了Socket.io，前/后端统一使用此开源项目来实现需求。1、socket.io与其它微服务在同一个web容器里，这时候是2个端口。所以socket.io另注册了一个服务名。2、解决分布式的问题。我是采用了后端增加消息中间件来分发。关键：StripPrefix 需要是0，否则长连接，并不能连接上】前端：vue3、socket.io-client【 4.7.4】nacos 里的网关的配置【socket.io的配置。
[聊天留言]PowerTalkBox 即时通讯源码(改进版)_powertalkbox.zip
12-13
- **一对一聊天**：基础的私聊功能，需要处理离线消息存储和在线状态同步。 - **群组聊天**：处理多对多的消息广播，需要考虑权限控制和历史消息查询。 - **实时音视频通话**：基于WebRTC等技术，实现高质量的音...
SpringBoot实现Socket.io消息推送(java+html)
04-16
因为项目中需要实现后端推荐消息到前端，经过研究和讨论，最终决定用Socket.io实现消息的推送，而在SpringBoot用Socket.io实现消息推送在网上的例子太少了，本人研究了一天的Socket.io，终于对Socket.io的应用比较清晰了。为了同行们的相互学习，在这里贴出了代码和实现方法，如果有什么不对的地方，希望各位提出意见和建议，谢谢。
基于微服务spring cloud+vue+spring boot在线聊天交友软件的设计与实现
a1254789688的博客
10-22 831
针对企业和机构在聊天通讯软件中的的信息管理监控困难、系统稳定性不足、二次开发困难、部署运维困难问题，对一个自主可控，安全稳定的通讯系统进行分析设计，采用前后端分离的开发模式，前端基于WEB端，采用基于MVVM模式架构的Vue全家桶进行独立开发，后端基于微服务技术搭建微服务集群，采用Spring Cloud技术体系，利用Ereka进行服务注册管理， Zuul进行服务网关抽取， Feigh进行服务集群负载均衡， Hystrix进行服务熔断。
探索即时通讯新纪元：易聊(EasyChat)——全新开源社交平台
最新发布
gitblog_00090的博客
06-12 621
探索即时通讯新纪元：易聊(EasyChat)——全新开源社交平台 EasyChatAndroidClientEasyChat是一个开源的社交类的App。主要包含消息、好友、群组等相关的IM核心功能。部分界面参照了QQ、微信等相关社交APP。EasyChat APP整体采用MVVM模式，基于JetPack(Lifecycle，LiveData，ViewModel，Room)构建项目地址:https...
webSocket管道通信完成群聊室(vue和java)
qq_43461350的博客
04-18 1992
注意事项 1.vue中要下载nojs.websocket 2.maven项目要配置依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId&g...
vue+java websocket 实现单聊群聊
101tx的博客
01-13 1262
最近在研究vue，想写点案例，最后决定写一个比较常用的聊天室。再次记录一下，方便日后查阅。前端用vue构建，后端使用java websocket 关于websocket的好处这里不在赘述，直接贴代码 package webSocketDemo.web; import java.io.IOException; import java.nio.ByteBuffer; import java.u...
rabb.it:重新创建rabb.it网站
05-15
通过掌握以上技术和方法，我们可以着手重新创建一个类似rabb.it的在线协作平台，提供屏幕共享、实时聊天和共同浏览的体验。这个过程不仅涉及技术实现，还需要对用户体验和产品设计有深入的理解。
chatroom.rar
04-17
在这个名为"chatroom.rar"的压缩包文件中，我们很可能是找到了一个完整的聊天室系统的源代码，包含必要的文件和资源，用于学习、修改或部署一个聊天室应用。 1. **前端部分** 前端是用户与聊天室交互的部分，通常...
多人聊天项目 源代码
08-05
多人聊天项目源代码是一种常见的软件开发实践，尤其在社交应用和协作工具中广泛存在。这样的系统通常基于网络通信协议，允许多个用户同时进行实时交流。本文将深入探讨多人聊天项目的核心知识点，包括技术架构、主要...
聊天应用
02-16
实际项目中，可能还需要结合其他技术，如前端框架（React, Angular, Vue.js），后端框架（Spring Boot, Play Framework），以及云服务（AWS, Google Cloud, Azure）等。随着技术的不断发展，开发者需要不断学习和...
基于Netty+SpringBoot+WebSocket+HTML5+制作的仿微信聊天APP，该仓库为后端系统+源代码+文档说明
11-28
## 功能说明 聊天界面能够保存最近聊天的好友及快照。 通讯录界面提供按A-Z的数组排列和查找。 发现界面提供朋友圈、添加好友和扫一扫功能。可以通过扫一扫添加好友。 个人界面提供头像修改、昵称修改等功能。 使用个推进行APP端消息的推送，使用前后端心跳保持WebSocket连接。 ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
易语言局域网通信EasyChat（自制，开源）附源码
04-10
易语言自制局域网通信软件EasyChat，目前版本为1.0 后续有时间会添加文件传输，远程控制等功能！ #说明：本程序作者默认开源，但请不要拿来做恶意程序！否则后果自负！#
《SpringCloud篇：聊天实现001遇到问题解决》《单点登录、多端登录》
qq_39773004的博客
12-07 488
一、pom依赖 +公共依赖 +插件 二、README.md 项目介绍 ### 这个项目是所有项目的父工程，禁止任何开发人员对其修改 ### MAVEN 私服地址 ### 使用的微服务的组件的地址 ### nacos: username: password: ### Redis地址 三、新建model 3.1pom依赖指定父工程 +依赖（不配置版本号，统一使用一个版本号），数据库使用版本号5.1.47避免时区问题 +连接池 注意：导入子工程时idea下载依赖卡住，关闭idea，任务管理.
基于Vue+springboot+websocket实现的简短仿微信web聊天室（私聊和群聊功能）（可在线预览）
qq_46416934的博客
08-28 1548
更新中。
一款基于 SpringCloud 开发的AI聊天机器人系统，已对接GPT-4.0，非常强大
欧菲丽的博客
03-18 1344
一个基于SpringCloud的Chatgpt机器人，已对接GPT-3.5、GPT-4.0、百度文心一言、stable diffusion AI绘图、Midjourney绘图。用户可以在界面上与聊天机器人进行对话，聊天机器人会根据用户的输入自动生成回复。同时也支持画图，用户输入文本，便可以自动制作文生文生图。
基于Java+SpringBoot+Vue前后端分离聊天即时通讯系统设计与实现
qq_57756904的博客
03-10 3954
博主介绍：✌全网粉丝3W+，全栈开发工程师，从事多年软件开发，在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战，博主也曾写过优秀论文，查重率极低，在这方面有丰富的经验
基于java+ssm+vue的在线交友系统
q_2781179521的博客
07-03 167
本文介绍了在线交友系统的开发全过程。通过分析企业对于在线交友系统的需求，创建了一个计算机管理在线交友系统的方案。文章介绍了在线交友系统的系统分析部分，包括可行性分析等，系统设计部分主要介绍了系统功能设计和数据库设计。本在线交友系统管理员功能有个人中心，用户管理，每日推荐管理，用户信息管理，消息管理，回复管理，管理员管理，交友论坛，系统管理等。用户可以注册登录，查看其他用户信息，发布信息等。因而具有一定的实用性。
Spring Cloud Gateway Socketio框架搭建
一起玩编程
02-09 3661
一、项目背景 项目需要，在微服务架构上，前后端通信采用socketio，中间架设一个网关。架构图如下： 暂未实现socketio服务端之间session共享。 文章最后附源码链接。 二、项目难点 1.网关转发socket请求 2.网关对socket请求做负载均衡 三、解决过程 （一）构建spring cloud微服务工程 1.新建cp-cloud-parent父工程 maven project，pom文件如下：主要是定义spring cloud依赖和spring boot依赖 .
基于vue3的setup+socket.io实现聊天的页面以及完整的聊天功能
04-27
好的，我可以为你提供基于Vue3的setup socket.io实现聊天的页面以及完整的聊天功能的代码。下面是代码示例： 首先，你需要在你的Vue项目中安装socket.io-client： ```bash npm install socket.io-client ``` 然后在你的Vue组件中引入socket.io-client并在setup函数中使用它来连接服务器： ```javascript import { ref, onMounted } from 'vue'; import io from 'socket.io-client'; export default { setup() { const messages = ref([]); const socket = io('http://localhost:3000'); onMounted(() => { socket.on('message', (message) => { messages.value.push(message); }); }); function sendMessage(message) { socket.emit('message', message); } return { messages, sendMessage }; } } ``` 在这个示例中，我们使用了Vue3的ref和onMounted函数来创建一个响应式的messages数组，并在组件挂载后使用socket.on函数监听服务器发送的message事件，并将接收到的消息push到messages数组中。我们还创建了一个sendMessage函数，用于向服务器发送消息。 接下来，我们可以在模板中使用messages数组和sendMessage函数来实现聊天界面： ```html <template> <div> <div v-for="message in messages" :key="message.id"> <p>{{ message.sender }}: {{ message.text }}</p> </div> <form @submit.prevent="sendMessage(newMessage)"> <input type="text" v-model="newMessage" /> <button type="submit">Send</button> </form> </div> </template> ``` 在这个示例中，我们使用v-for指令循环渲染messages数组中的每个消息，并在模板中使用一个表单来允许用户发送新消息。我们使用v-model指令将表单的输入绑定到newMessage变量，并在表单提交时调用sendMessage函数来向服务器发送新消息。 最后，我们需要在服务器端实现接收和处理消息的逻辑。以下是一个简单的Node.js服务器端代码示例： ```javascript const http = require('http'); const socketIo = require('socket.io'); const server = http.createServer(); const io = socketIo(server); io.on('connection', (socket) => { console.log(`Client connected: ${socket.id}`); socket.on('message', (message) => { io.emit('message', { id: Date.now(), sender: 'User', text: message }); }); socket.on('disconnect', () => { console.log(`Client disconnected: ${socket.id}`); }); }); server.listen(3000, () => { console.log('Server started'); }); ``` 在这个示例中，我们使用Node.js创建了一个HTTP服务器，并使用socket.io创建了一个WebSocket服务器。在WebSocket连接建立时，我们使用socket.on函数监听客户端发送的message事件，并使用io.emit函数将接收到的消息广播给所有连接的客户端。当连接断开时，我们使用socket.on函数监听disconnect事件。 这就是一个基于Vue3的setup socket.io实现聊天的页面以及完整的聊天功能的代码示例。希望能对你有所帮助！
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

toollong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值