需求缘起:
在上一篇文章已经可以群聊功能了,但是存在一个问题,就是无法显示消息是谁发送了,这样就会导致消息乱七八糟的无法解读。在这版文章中解决昵称显示的问题。
效果展示:
悟空消息:
师傅消息:
八戒消息:
(1)在连接的时候,让用户输入昵称
这个简单,只需要提供一个input让用户进行输入即可:
昵称:<input type="text" id="nickname"/>
<button οnclick="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());
}
这种方式具体可以参考链接的文章,博主并没有具体的进行实现,只是简单看了下文章内容,具体地址如下:
方案总结
本篇文章最终使用的是方式2的方式进行实现,对于方式2和方式3都有各自的使用场景,大家可以自己进行斟酌。