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

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"&gt;

  <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

时间: 2024-08-29 12:59:10

HTML5 WebSocket实现点对点聊天的示例代码的相关文章

脱离Tomcat环境下使用WebSocket即时通讯聊天的示例

A 代码生成器(开发利器);     增删改查的处理类,service层,mybatis的xml,SQL( mysql   和oracle)脚本,   jsp页面 都生成   就不用写搬砖的代码了,生成的放到项目里,可以直接运行B 阿里巴巴数据库连接池druid;  数据库连接池  阿里巴巴的 druid.Druid在监控.可扩展性.稳定性和性能方面都有明显的优势C 安全权限框架shiro ;  Shiro 是一个用 Java 语言实现的框架,通过一个简单易用的 API 提供身份验证和授权,更安

C# WebSocket 服务端示例代码 + HTML5客户端示例代码

WebSocket服务端 C#示例代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Net.Sockets; using System.Net; using System.Threading; using System.Text.RegularExpressions; using System.Security.Cryptography; na

在Java7与Tomcat8环境下使用WebSocket实现聊天的示例

文中案例在apache-tomcat-8.0.15和jdk1.8.0_25环境下开发,运行.不过标题上是Java7,并不造成影响,代码中没有涉及任何与jdk1.8.x相关的代码.另外之所以要讲清软件版本,一是为了保证案例能够有个明确的实现背景,二是websocket实现tomcat7.x与tomcat8.x有很大差异. 在JavaEE规范集中我们这里主要看Java API for WebSocket(JSR 356).Websocket-api提供了Java实现Websocket的接口,其中最重

html5 websocket + node.js 实现网页聊天室

1 client:    socket.io server:   node.js +  express  + socket.io 一个简单的聊天室  demo,没有注册,内置了一些测试用户 2 client 关键代码 var socket = io.connect('http://localhost:8080'); socket.on('connect',function(){ console.log('connected to server'); socket.on('login succes

swoole webSocket 聊天室示例

swoole1.7.9增加了内置的WebSocket服务器支持,通过几行PHP代码就可以写出一个异步非阻塞多进程的WebSocket服务器. 基于swoole websocket的用户上下线通知,在线用户列表,群聊等简易功能的聊天室: 源码前往github : https://github.com/wanggang826/about_swoole/websocket_chat 简易聊天室示例地址:  http://sw.wanggangg.top/websocket_chat 原文地址:http

基于html5 localStorage , web SQL, websocket的简单聊天程序

new function() { var ws = null; var connected = false; var serverUrl; var connectionStatus; var sendMessage; var connectButton; var disconnectButton; var sendButton; var open = function() { var url = serverUrl.val(); ws = new WebSocket(url); ws.onope

javaweb webSocket 实现简单的点对点聊天功能

本文依据 http://redstarofsleep.iteye.com/blog/1488639?page=4  内容修改完成,实现点对点聊天 需要 jdk 7 , tomcat需要支持websocket的版本 1.InitServlet 该类主要是用来初始化构造将来存储用户身份信息的map仓库,利用其初始化方法Init 初始化仓库, 利用其静态方法getSocketList 获得对应的用户身份信息. webSocket ,我认为MessageInbound 用来识别登录人的信息,用它来找到对

C# 实现WEBSOCKET聊天应用示例

C# 实现WEBSOCKET聊天应用示例 http://blog.163.com/[email protected]/blog/static/10407267820121016103055506/ 2012-11-16 22:30:55|  分类: .Net编程 |  标签:websocket  |举报|字号 订阅 下载LOFTER我的照片书  | 用C# ASP.NET MVC 实现WebSocket ,对于WebSocket想必都很了解了,不多说. 东西做的很粗糙 只能实现基本的聊天功能,不

python与html5 websocket开发聊天对话窗

1.下载必须的包 https://github.com/Pithikos/python-websocket-server,解压缩并把文件夹名'python-websocket-server-master' 改为'websocket' 2.websocket文件夹内只保留websocket_server文件夹和server.py 3.稍微修改server.py的源码 1 from websocket_server import WebsocketServer 2 3 # Called for ev