【视频&交流平台】
http://study.163.com/course/introduction.htm?courseId=1004329008&utm_campaign=commission&utm_source=400000000155061&utm_medium=share
http://study.163.com/course/introduction.htm?courseId=1004638001&utm_campaign=commission&utm_source=400000000155061&utm_medium=share
https://gitee.com/happyangellxq520/spring-boot
http://412887952-qq-com.iteye.com/blog/2321532
需求缘起:
在上一篇文章已经可以群聊功能了,但是存在一个问题,就是无法显示消息是谁发送了,这样就会导致消息乱七八糟的无法解读。在这版文章中解决昵称显示的问题。
效果展示:
悟空消息:
师傅消息:
八戒消息:
(1)在连接的时候,让用户输入昵称
这个简单,只需要提供一个input让用户进行输入即可:
昵称:<input type="text" id="nickname"/> <button onclick="conectWebSocket()">连接WebSocket</button>
(2)连接前的校验
在用户点击连接判断用户是否输入昵称了:
var nickname = document.getElementById("nickname").value; if(nickname==""){ alert("请输入昵称"); return; }
以上这些都是简单了,那问题的关键就是如何把昵称显示在聊天信息中呢?这里提供几种思路,大家可以自己开拓方法。
(3)昵称显示方式1:消息携带
这种方式就是在发送消息的时候,直接拼接上用户的昵称,这种改动是最小的,也是比较简单的方式,只需要修改前端网页代码即可:
//获取输入的文本信息进行发送 var message = document.getElementById('text').value; websocket.send(nickname+":"+message);
但是这种方式有一个弊端,就是服务端要知道用户的昵称就比较费劲了,所以这种方式就是玩玩而已,实际不这么玩。
(4)昵称显示方式2:连接传递
这个就是在建立连接的时候传递到服务端连接点。
首先修改客户端的连接方式:
websocket = new WebSocket("ws://localhost:8080/websocket/"+nickname);
服务端的服务端点发布:
@ServerEndpoint(value = "/websocket/{nickname}") @Component public class MyWebSocket {}
服务端获取参数:
这个在每个方法中都可以获取的,使用@PathParam("nickname") String nickname,比如在连接的时候:
@OnOpen public void onOpen(Session session,@PathParam("nickname") String nickname) { this.session = session; this.nickname = nickname; }
(5)昵称显示方式3:使用httpSession
这种方式实现起来就比较复杂了,这里只说下大概的一个思路,就是将昵称保存到httpSession对象中,使用httpSession.setAttribute("nickname",nickname)进行存储。
问题的关键是如何在websocket中获取到httpSession呢,主要是通过添加一个配置类进行实现:
//配置类 将http中的session传入websocket中 public class GetHttpSessionConfigurator extends ServerEndpointConfig.Configurator { @Override public void modifyHandshake(ServerEndpointConfig config, HandshakeRequest request, HandshakeResponse response) { HttpSession httpSession = (HttpSession) request.getHttpSession(); config.getUserProperties().put(HttpSession.class.getName(), httpSession); } }
那么在WebSocket就可以获取到HttpSession对象了:
@OnOpen public void onOpen(Session session, EndpointConfig config) { this.session = session; httpSession = (HttpSession) config.getUserProperties().get( HttpSession.class.getName()); }
这种方式具体可以参考链接的文章,博主并没有具体的进行实现,只是简单看了下文章内容,具体地址如下:
http://blog.csdn.net/z719725611/article/details/52400404
http://blog.csdn.net/yayicho/article/details/52330627
方案总结
本篇文章最终使用的是方式2的方式进行实现,对于方式2和方式3都有各自的使用场景,大家可以自己进行斟酌。
相关推荐
Spring Boot整合websocket实现群聊,音频发送,点对点聊天,图片发送。 Spring Boot整合websocket实现群聊,点对点聊天,图片发送,音频发送。 Spring Boot整合websocket实现群聊,点对点聊天,图片发送,音频发送 ...
Spring Boot整合websocket实现群聊,点对点聊天,图片发送,音频发送
一个基于Spring Boot + WebSocket + Redis,可快速开发的分布式即时通讯群聊系统。适用于直播间聊天、游戏内聊天、客服聊天等临时性群聊场景。 Java开发基于SpringBoot+WebSocket+Redis分布式即时通讯群聊系统。一...
基于Spring Boot+WebSocket+Redis开发的分布式即时通讯群聊系统源码+项目使用说明.zip 该项目是个人毕设项目源码,评分达到95分,都经过严格调试,确保可以运行!放心下载使用。 该项目资源主要针对计算机、自动化等...
SpringBoot整合websocket实现群聊
基于t-io开发的轻量、高性能、单机支持几十万至百万在线用户IM,主要目标降低即时通讯门槛,快速打造低成本接入在线IM系统,通过极简洁的消息格式就可以实现多端不同协议间的消息发送如内置(Http、Websocket、Tcp...
基于LayIM、Netty、Spring Boot 实现的在线聊天系统,web网络开发,可内嵌于自己的B/S系统或进行二次迭代 本项目是基于Netty实现的一个实时通讯系统,前端使用了LayIM组件。 技术栈 Spring Boot、Spring MVC、...
通过webSocket实现点对点,群聊,以及系统消息通讯,redis队列实现离线消息。
Spring Boot netty nio WebSocket MyBatis Spring Data JPA Redis MySQL Spring Session Alibaba Druid Gradle 前端技术栈 Vue axios vue-router Vuex WebSocket vue-cli4 JavaScript ES6 npm 本项目是一个仿QQ基本...
人事管理人事管理系统(Spring Boot + ssm + jsp)有问题可加入群聊806221669pull代码请先star ~~~如果git无法正常拉取代码执行git config --global http.postBuffer 524288000再执行git config --global ...
websocket+springboot+mybatis-plus +html 实现在线聊天系统,支持群聊,私聊,登陆
使用WebSocket+SpringBoot搭建简易的多人聊天室 由浅入深,配合博客入门教程文章食用,风味独特。 使用WebSocket+SpringBoot搭建简易的多人聊天室 由浅入深,配合博客入门教程文章食用,风味独特。 使用WebSocket+...
功能如下 - 用户管理:业务自己实现,暂从数据库添加 - 好友管理:添加好友、删除好友、修改备注...- 聊天模式:私聊、群聊 - 消息类型:系统、文本、语音、图片、视频 - 聊天管理:删除聊天、置顶聊天、查看聊天记录等
使用了Spring Security安全框架进行密码的加密存储和登录登出等逻辑的处理,以WebSocket+Socket.js+Stomp.js实现消息的发送与接收,监听。搭建FastDFS文件服务器用于保存图片,使用EasyExcel导出数据,使用Vue.js...
基于SpringBoot WebSocket的在线聊天系统,实现单窗口消息推送、群消息推送、上线提醒、Redis会话消息储存
聊天发图片,发视频,频道聊天,好友聊天,通过websocket实现 spring boot zfoo rpc mongodb 4.2 zookeeper 3.6.1 前端: PWA,自适应页面 service worker实现 vue, vuetify 百度和google页面统计 数据库和资源: ...
PingPangChat是一个基于netty的websocket即时聊天程序。支持文字、表情包、图片发送接收功能,以及消息提醒(聊天回显)。...后端:spring boot2,netty,dubbo,mybatis,redis,zookeeper 监控:prometheus+Grafana
项目功能:登录注册、添加好友,创建群聊、单聊群聊、发送表情、发送图片、发送视频、上传文件、下载文件、查看好友群聊信息、删除会话、邀请加入群聊、管理个人信息、管理群聊信息、注销用户等等功能。 应用技术:...
项目简介:一个使用Layui开发的通讯录类似QQ的在线聊天系统,可以聊天、添加好友、群聊等功能,可以添加好友。 主要功能 两人之间私聊、多人之间的群聊 可以查看两人的聊天记录、群组的聊天记录 可以发送图片、...
项目说明:本博客是学习过程中建造的项目,为了融合更多知识点,让博客看起来更加高大上,使用了多个框架组合,有些也是企业级项目中常用的解决方式。多内容内容的,通常是xss攻击预防等安全方面的。...