WebSocket实现简单聊天室
WebSocket简介：WebSocket其实是属于H5规范的一部分，它允许通过JavaScript建立和服务器的连接,从而实现服务器将数据推送给服务器。和传统TCP协议相比，WebSocket的好处在于实现了全双工通信（不需要客户端发出请求，服务器就可以直接向服务端发送数据），现在大部分的浏览器（FireFox,Chrome,Safari,Opera等）都支持该技术，Tomcat8也对于该技术有着很好的实现。
基于WebSocket实现多人聊天的java类
·用@ServerEndpoint来修饰java类
·@OnOpen修饰建立连接时的方法
@OnOpen
public void start(Session session) throws IOException {
this.session = session;
}
·@OnClose修饰断开连接时的方法
@OnClose
public void end() {
clientSet.remove(name, this);
String message = String.format("【%s %s】", name, "离开了聊天室！");
// 发送消息
broadcast(message);
}
·@OnMessage修饰接受消息时的方法
@OnMessage
public void print(String msg) {
if (first) {
name = msg;
clientSet.put(name, this);
String message = String.format("【%s %s】", name, "加入了聊天室！");
// 发送消息
broadcast(message);
first = false;
} else {
broadcast("【" + name + "】" + ":" + msg);
}
}
·@OnError修饰出错时的方法
@OnError
public void onError(Throwable t) throws Throwable {
System.out.println("WebSocket服务端错误 " + t);
}
·broadcast方法——向所有客户端发送消息
public void broadcast(String msg) {
// 遍历服务器关联的所有客户端
Chat client = null;
for (String nickname : clientSet.keySet()) {
try {
client = (Chat) clientSet.get(nickname);
synchronized (client) {
// 发送消息
client.session.getBasicRemote().sendText(msg);
}
} catch (IOException e) {
System.out.println("聊天错误，向客户端 " + client + " 发送消息出现错误。");
clientSet.remove(name, client);
try {
client.session.close();
} catch (IOException e1) {
}
String message = String.format("【%s %s】", client.name, "已经被断开了连接。");
broadcast(message);
}
}
}
需要注意的是：这里的JAVA类不是真正的WebSocket服务端，Tomcat会调用这个类的方法作为WebSocket服务端，而且Tomcat会为每个客户端创建一个类对象。
·chatRoom.html---聊天室页面
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>简单聊天室</title>
<script type="text/javascript">
// 创建WebSocket对象
var webSocket = new WebSocket("ws://localhost:8080/WebSocket1/chat");
var sendMsg = function() {
var inputElement = document.getElementById('msg');
if (inputElement.value == '')
alert("输入内容不为空");
else {
// 发送消息
webSocket.send(inputElement.value);
// 清空单行文本框
inputElement.value = "";
}
}
var send = function(event) {
//设置回车发送消息
if (event.keyCode == 13) {
sendMsg();
}
};
webSocket.onopen = function() {
n = prompt('请给自己取一个昵称：');
if (n != '' && n != null)
webSocket.send(n);
else
//设置游客登录
webSocket.send("游客" + Math.random() * 100000000000000000);
document.getElementById('msg').onkeydown = send;
document.getElementById('sendBn').onclick = sendMsg;
};
// 为onmessage事件绑定监听器，接收消息
webSocket.onmessage = function(event) {
var show = document.getElementById('show')
// 接收、并显示消息
show.innerHTML += new Date() + "<br/>" + event.data + "<br/>";
//让聊天框滚动条始终显示新消息
show.scrollTop = show.scrollHeight;
}
webSocket.onclose = function() {
document.getElementById('msg').onkeydown = null;
document.getElementById('sendBn').onclick = null;
Console.log('WebSocket已经被关闭。');
};
</script>
</head>
<body>
<div
style="width: 600px; height: 240px; overflow-y: auto; border: 1px solid #333;"
id="show"></div>
<input type="text" size="80" id="msg" name="msg" placeholder="输入聊天内容" />
<input type="button" value="发送" id="sendBn" name="sendBn" />
</body>
</html>
运行结果
这个简单的聊天室就做到这里，还有很多东西可以继续完善，比如显示聊天室内在线的用户和悄悄话功能以及UI等等，虽然很简单，但是基本的聊天功能还是可以实现的
项目代码https://github.com/homewin21/WebSocket
