HTML5 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不支持二進制的傳輸。以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
HTML5 WebSocket實現點對點聊天的示例代碼