基于WebSocket的网上聊天室
2018-01-07 本文已影响0人
红Archer
思路：
服务端：
1、创建一个Inbound类，继承MessageInbound（client对象）
2、重写Inbound中的on方法
onOpen()、onClose()、onMessage()
3、创建ClientPools（客户端池）
1）保存所有Client对象（数据结构）
2）添加和移除Client对象
3）给所有Client发送消息的方法
4、创建WebSocketServlet的子类
重写createWebSocketInbound方法，返回第1步所创建的类
5、用注解部署Servlet
客户端Client：
1、创建WebSocket对象("ws://ip:port/上下文/url")
2、给WebSocket对象的
onopen、onclose、onmessage（对象.data）、onerror事件捆绑函数
3、发送按钮，调用webSocket对象的send()发送消息，离开使用close()关闭链接
实现代码：
客户端池ClientPools：
public class ClientPools {
private static Set<MyMessageInbound> clients = new HashSet<MyMessageInbound>();
public static void addClient(MyMessageInbound client)
{
clients.add(client);
}
public static void removeClient(MyMessageInbound client)
{
clients.remove(client);
}
public static void sendMessage(String message)
{
for(MyMessageInbound client:clients)
{
try {
//给client发送消息
client.getWsOutbound().writeTextMessage(CharBuffer.wrap(message));
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
MessageInbound：
public class MyMessageInbound extends MessageInbound {
@Override
protected void onClose(int status) {
ClientPools.removeClient(this);
}
@Override
protected void onOpen(WsOutbound outbound) {
ClientPools.addClient(this);
ClientPools.sendMessage("新人上线！");
System.out.println("新人上线");
}
@Override
protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
// TODO Auto-generated method stub
}
@Override
protected void onTextMessage(CharBuffer arg0) throws IOException {
//有消息过来就会触发这个事件，把当前消息，推送给其他client
System.out.println(arg0.toString());
ClientPools.sendMessage(arg0.toString());
}
}
WebSocketServlet：
@WebServlet(urlPatterns = {"/testMsg"})
public class MyMessageServlet extends WebSocketServlet {
@Override
protected StreamInbound createWebSocketInbound(String arg0,
HttpServletRequest arg1) {
System.out.println("!!!!!!!!!!!!!");
return new MyMessageInbound();
}
}
html页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:215px;
top:27px;
width:677px;
height:400px;
z-index:1;
}
#Layer2 {
position:absolute;
left:215px;
top:441px;
width:678px;
height:72px;
z-index:2;
}
-->
</style>
<script type="text/javascript">
var webSocket = new WebSocket("ws://localhost:8080/WebSocketTalk/testMsg");
webSocket.onopen=function(){
}
webSocket.onclose=function(){
}
webSocket.onmessage=function(msgObj){
console.log(msgObj.data);
document.getElementById("Layer1").innerHTML=document.getElementById("Layer1").innerHTML+"<br/>"+msgObj.data;
}
function toSend(){
var _msg = document.getElementById("msg").value;
webSocket.send(_msg);
}
</script>
</head>
<body>
<div id="Layer1"></div>
<div id="Layer2">
<label>
<textarea name="mes" cols="50" rows="2" id="msg"></textarea>
<input type="submit" name="Submit" value="发送" onclick="toSend()"/>
</label>
</div>
</body>
</html>
