tofacebook.com -专业IT技术社区 HTML5 WebSocket实现点对点聊天的示例代码 Web程序 - tofacebook.com-专业IT技术社区
138°

HTML5 WebSocket实现点对点聊天的示例代码 Web程序

标签:HTML案例分析   HTML5讲解   

HTML5的websocket与Tomcat实现了多人聊天,那是最简单也是最基本的,其中注意的就是开发环境,要满足jdk1.7和tomcat8,当然了tom7的7.063也行,在网站上找到了用google关于websocket的点对点聊天,更好的是可以和大多数系统很好的配合起来看下效果图。
HTML5 WebSocket实现点对点聊天的示例代码

  因为是模拟的,这里给出的是两个JSP页面A和B,里面分别向session里放了两个名字小明和小化,注意,这里的session是HttpSessionsession,之前多人聊天里的session是javax.websocket.Session;不一样的。HTML5 WebSocket实现点对点聊天的示例代码

  这里想一下,使用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实现点对点聊天的示例代码

标签:HTML案例分析   HTML5讲解   

原文地址:http://blog.51cto.com/13201210/2093727


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。