HTML5的websocket与Tomcat实现了多人聊天,那是最简单也是最基本的,其中注意的就是开发环境,要满足jdk1.7和tomcat8,当然了tom7的7.063也行,在网站上找到了用google关于websocket的点对点聊天,更好的是可以和大多数系统很好的配合起来看下效果图。
因为是模拟的,这里给出的是两个JSP页面A和B,里面分别向session里放了两个名字小明和小化,注意,这里的session是HttpSessionsession,之前多人聊天里的session是javax.websocket.Session;不一样的。
这里想一下,使用HttpSessionsession控制聊天的用户,这里没有使用注解,传统的web.xml配置方式,首先在系统启动的时候调用InitServlet方法。
publicclassInitServletextendsHttpServlet{
privatestaticfinallongserialVersionUID=-3163557381361759907L;
privatestaticHashMap<String,MessageInbound>socketList;
publicvoidinit(ServletConfigconfig)throwsServletException{
InitServlet.socketList=newHashMap<String,MessageInbound>;
super.init(config);
System.out.println("初始化聊天容器");
}
publicstaticHashMap<String,MessageInbound>getSocketList{
returnInitServlet.socketList;
}
}
这里你可以跟自己的系统结合,对应的web配置代码如下:
<?xmlversion="1.0"encoding="UTF-8"?>
<web-appversion="3.0"xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<servlet>
<servlet-name>websocket</servlet-name>
<servlet-class>socket.MyWebSocketServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>websocket</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>initServlet</servlet-name>
<servlet-class>socket.InitServlet</servlet-class>
<load-on-startup>1</load-on-startup><!--方法执行的级别-->
</servlet>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
这就是最普通的前台像后台发送请求的过程,也是很容易嵌入到自己的系统里
MyWebSocketServlet:
publicclassMyWebSocketServletextendsWebSocketServlet{
publicStringgetUser(HttpServletRequestrequest){
StringuserName=(String)request.getSession.getAttribute("user");
if(userName==null){
returnnull;
}
returnuserName;
}
protectedStreamInboundcreateWebSocketInbound(Stringarg0,
HttpServletRequestrequest){
System.out.println("用户"+request.getSession.getAttribute("user")+"登录");
returnnewMyMessageInbound(this.getUser(request));
}
}
MyMessageInbound继承MessageInbound
packagesocket;
importjava.io.IOException;
importjava.nio.ByteBuffer;
importjava.nio.CharBuffer;
importjava.util.HashMap;
importorg.apache.catalina.websocket.MessageInbound;
importorg.apache.catalina.websocket.WsOutbound;
importutil.MessageUtil;
publicclassMyMessageInboundextendsMessageInbound{
privateStringname;
publicMyMessageInbound{
super;
}
publicMyMessageInbound(Stringname){
super;
this.name=name;
}
@Override
protectedvoidonBinaryMessage(ByteBufferarg0)throwsIOException{
}
@Override
protectedvoidonTextMessage(CharBuffermsg)throwsIOException{
//用户所发消息处理后的map
HashMap<String,String>messageMap=MessageUtil.getMessage(msg);//处理消息类
//上线用户集合类map
HashMap<String,MessageInbound>userMsgMap=InitServlet.getSocketList;
StringfromName=messageMap.get("fromName");//消息来自人的userId
StringtoName=messageMap.get("toName");//消息发往人的userId
//获取该用户
MessageInboundmessageInbound=userMsgMap.get(toName);//在仓库中取出发往人的MessageInbound
MessageInboundmessageFromInbound=userMsgMap.get(fromName);
if(messageInbound!=null&&messageFromInbound!=null){//如果发往人存在进行操作
WsOutboundoutbound=messageInbound.getWsOutbound;
WsOutboundoutFromBound=messageFromInbound.getWsOutbound;
Stringcontent=messageMap.get("content");//获取消息内容
StringmsgContentString=fromName+"说:"+content;//构造发送的消息
//发出去内容
CharBuffertoMsg=CharBuffer.wrap(msgContentString.toCharArray);
CharBufferfromMsg=CharBuffer.wrap(msgContentString.toCharArray);
outFromBound.writeTextMessage(fromMsg);
outbound.writeTextMessage(toMsg);//
outFromBound.flush;
outbound.flush;
}
}
@Override
protectedvoidonClose(intstatus){
InitServlet.getSocketList.remove(this);
super.onClose(status);
}
@Override
protectedvoidonOpen(WsOutboundoutbound){
super.onOpen(outbound);
//登录的用户注册进去
if(name!=null){
InitServlet.getSocketList.put(name,this);//存放客服ID与用户
}
}
@Override
publicintgetReadTimeout{
return0;
}
}
在onTextMessage中处理前台发出的信息,并封装信息传给目标
还有一个messageutil
packageutil;
importjava.nio.CharBuffer;
importjava.util.HashMap;
publicclassMessageUtil{
publicstaticHashMap<String,String>getMessage(CharBuffermsg){
HashMap<String,String>map=newHashMap<String,String>;
StringmsgString=msg.toString;
Stringm=msgString.split(",");
map.put("fromName",m[0]);
map.put("toName",m[1]);
map.put("content",m[2]);
returnmap;
}
}
当然了,前台也要按照规定的格式传信息
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Index</title>
<scripttype="text/javascript"src="js/jquery-1.7.2.min.js"></script>
<%session.setAttribute("user","小化");%>
<scripttype="text/javascript">
varws=null;
functionstartWebSocket{
if(‘WebSocket‘inwindow)
ws=newWebSocket("ws://localhost:8080/WebSocketUser/websocket.do");
elseif(‘MozWebSocket‘inwindow)
ws=newMozWebSocket("ws://localhost:8080/WebSocketUser/websocket.do");
else
alert("notsupport");
ws.onmessage=function(evt){
//alert(evt.data);
console.log(evt);
//$("#xiaoxi").val(evt.data);
setMessageInnerHTML(evt.data);
};
functionsetMessageInnerHTML(innerHTML){
document.getElementById(‘message‘).innerHTML+=innerHTML+‘<br/>‘;
}
ws.onclose=function(evt){
//alert("close");
document.getElementById(‘denglu‘).innerHTML="离线";
};
ws.onopen=function(evt){
//alert("open");
document.getElementById(‘denglu‘).innerHTML="在线";
document.getElementById(‘userName‘).innerHTML=‘小化‘;
};
}
functionsendMsg{
varfromName="小化";
vartoName=document.getElementById(‘name‘).value;//发给谁
varcontent=document.getElementById(‘writeMsg‘).value;//发送内容
ws.send(fromName+","+toName+","+content);//注意格式
}
</script>
</head>
<bodyonload="startWebSocket;">
<p>聊天功能实现</p>
登录状态:
<spanid="denglu">正在登录</span>
<br>
登录人:
<spanid="userName"></span>
<br>
<br>
<br>
发送给谁:<inputtype="text"id="name"value="小明"></input>
<br>
发送内容:<inputtype="text"id="writeMsg"></input>
<br>
聊天框:<divid="message"></div>
<br>
<inputtype="button"value="send"onclick="sendMsg"></input>
</body>
</html>
这是A.jsp页面,B同上
通过以上代码,就可以实现一个点对点的聊天功能,如果做的大,可以做成一个web版的聊天系统,包括聊天室和单人聊天,都说websocket不支持二进制的传输。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
原文地址:http://blog.51cto.com/13201210/2093727