174. Spring Boot WebSocket：群聊-昵称

 

【视频&交流平台】

à SpringBoot视频

http://study.163.com/course/introduction.htm?courseId=1004329008&utm_campaign=commission&utm_source=400000000155061&utm_medium=share

à SpringCloud视频

http://study.163.com/course/introduction.htm?courseId=1004638001&utm_campaign=commission&utm_source=400000000155061&utm_medium=share

à Spring Boot源码

https://gitee.com/happyangellxq520/spring-boot

à 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都有各自的使用场景，大家可以自己进行斟酌。