174. Spring Boot WebSocket: Group Chat - Nickname

【Video & Communication Platform】

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

à SpringCloud Video

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

à Spring Boot source code

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

à Spring Boot communication platform

http://412887952-qq-com.iteye.com/blog/2321532

Origin of need:

In the previous article, the group chat function is already available, but there is a problem, that is, it is impossible to display who sent the message, which will cause the message to be messy and unreadable. Addressed an issue with nickname display in this version of the article.

Show results:

 Goku News:

Master message:

Bajie news:

( 1 ) When connecting, let the user enter a nickname

这个简单，只需要提供一个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都有各自的使用场景，大家可以自己进行斟酌。

174. Spring Boot WebSocket: Group Chat - Nickname

Guess you like