前两篇文章【WebSocket刨根问底(一)】【WebSocket刨根问底(二)】我们介绍了WebSocket的一些基本理论，以及一个简单的案例，那么今天继续，我们来看一个简单的群聊的案例，来进一步了解WebSocket这个东东。
OK，开始之前，我们先来看看我们今天要实现的效果：
好了，废话不多说，我们进来看看这个东西要怎么样实现吧！
创建Web项目
这里和上文（WebSocket刨根问底(二)）一样，web项目创建成功之后，还是要我们先手动添加websocket的jar包进来，添加方式如果小伙伴不懂的话可以参考我们上篇文章，这里我就不再赘述。
创建HTML页面
页面的效果效果小伙伴们刚才都看到了，我这里就直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ws页面</title>
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<input type="text" placeholder="请输入您的昵称" id="nickname"><input type="button" value="连接" id="btnClick1">
</div>
<div id="resultDiv"></div>
<div><input type="text" id="msg"><input type="button" value="发送" id="btnClick2" disabled="disabled"></div>
<script>
var webSocket;
$("#btnClick2").click(function () {
var msg = $("#msg").val();
$("#msg").val('');
webSocket.send(msg)
});
$("#btnClick1").click(function () {
var nickname = $("#nickname").val();
if(nickname==null||nickname=='') {
alert("必须输入昵称");
return;
}
$("#btnClick2").removeAttr("disabled");
$(this).attr("disabled", "disabled");
$("#resultDiv").append("<p>开始连接服务端!</p>");
webSocket = new WebSocket("ws://localhost/myws2/"+nickname);
webSocket.onerror = function (event) {
$("#resultDiv").append("<p>onerror:" + event.data + "</p>");
}
webSocket.onopen = function (event) {
$("#resultDiv").append("<p>连接成功！</p>");
}
webSocket.onmessage = function (event) {
$("#resultDiv").append("<p>" + event.data + "</p>");
}
});
</script>
</body>
</html>关于这段HTML代码，我说如下几点：
OK，这里的代码都很简单，我就不一一解释了。
创建WebSocket服务端
由于我们这里要做的是群聊，所以服务端的主要功能就是接收客户端传来的消息并将之广播给所有的客户端。服务端代码如下：
@ServerEndpoint("/myws2/{nickname}")
public class WebSocketServer2 {
private String nickname;
private Session session;
private static final Set<WebSocketServer2> WEB_SOCKET_SERVER_2_SET = new CopyOnWriteArraySet<WebSocketServer2>();
@OnMessage
public void onMessage(String message, @PathParam(value = "nickname") String nickname) throws IOException {
System.out.println("收到了客户端发来的消息：" + message);
sendText(nickname+"发来了:"+message);
}
private static void sendText(String msg) {
for (WebSocketServer2 webSocketServer2 : WEB_SOCKET_SERVER_2_SET) {
try {
synchronized (webSocketServer2) {
webSocketServer2.session.getBasicRemote().sendText(msg);
}
} catch (IOException e) {
WEB_SOCKET_SERVER_2_SET.remove(webSocketServer2);
try {
webSocketServer2.session.close();
} catch (IOException e1) {
}
sendText(webSocketServer2.nickname + "同学已经下线");
}
}
}
@OnOpen
public void onOpen(Session session, @PathParam(value = "nickname") String nickname) throws IOException {
this.nickname = nickname;
this.session = session;
WEB_SOCKET_SERVER_2_SET.add(this);
sendText(nickname + "进入房间");
StringBuffer sb = new StringBuffer();
for (WebSocketServer2 webSocketServer2 : WEB_SOCKET_SERVER_2_SET) {
sb.append(webSocketServer2.nickname).append(";");
}
sendText("当前房间有："+sb.toString());
}
@OnClose
public void onClose(Session session) throws IOException {
WEB_SOCKET_SERVER_2_SET.remove(this);
sendText(this.nickname+"童鞋已下线");
}
}关于这个服务端我解释如下几点：
OK，经过以上7点的讲解，小伙伴们对服务端的代码应该是非常熟悉了吧~
好了，那我们今天的案例就先说到这里，下篇文章我们来看一个五子棋的案例，进一步学习websocket的使用。
案例下载：http://download.csdn.net/download/u012702547/9954347（由于CSDN下载现在必须要积分，不得已设置了1分，如果小伙伴没有积分，文末留言我发给你。）
关注公众号【江南一点雨】，专注于 Spring Boot+微服务以及前后端分离等全栈技术，定期视频教程分享，关注后回复 Java ，领取松哥为你精心准备的 Java 干货！
以上。