基于HTML5和Tomcat WebSocketServlet的聊天室简单实现
2014-01-07 13:20
1006 查看
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String WsBasePath = "ws://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>websocket聊天室</title> <style type="text/css"> #chat { text-align: left; width: 600px; height: 500px; width: 600px; } #up { text-align: left; width: 100%; height: 400px; border: 1px solid green; OVERFLOW-Y: auto; } #down { text-align: left; height: 100px; width: 100%; } </style> </head> <body> <h2 align="center">基于HTML5的聊天室</h2> <div align="center" style="width: 100%; height: 700px;"> <div id="chat"> <div id="up"></div> <div id="down"> <textarea style="width: 602px; height: 100%;" id="send"></textarea> </div> </div> <br/> <input type="button" value="连接" onclick="chat(this);"> <input type="button" value="发送" onclick="send(this);" disabled="disabled" id="send_btn" title="Ctrl+Enter发送"> </div> </body> <script type="text/javascript"> var socket; var receive_text = document.getElementById("up"); var send_text = document.getElementById("send"); function addText(msg) { receive_text.innerHTML += "<br/>" + msg; receive_text.scrollTop = receive_text.scrollHeight; } var chat = function(obj) { obj.disabled = "disabled"; try{ socket = new WebSocket('<%=WsBasePath + "chat"%>'); receive_text.innerHTML += "<font color=green>正在连接服务器……</font>"; }catch(e){ receive_text.innerHTML += "<font color=red>抱歉,您的浏览器不支持html5,请使用IE10或者最新版本的谷歌、火狐等浏览器!</font>"; } //打开Socket socket.onopen = function(event) { falg=false; addText("<font color=green>连接成功!</font>"); document.getElementById("send_btn").disabled = false; send_text.focus(); document.onkeydown = function(event) { if (event.keyCode == 13 && event.ctrlKey) { send(); } }; }; socket.onmessage = function(event) { addText(event.data); }; socket.onclose = function(event) { addText("<font color=red>连接断开!</font>"); obj.disabled = ""; }; }; var send = function(obj) { if (send_text.value == "") { return; } socket.send(send_text.value); send_text.value = ""; send_text.focus(); }; </script> </html>
ChatWebSocketServlet.java
package com.baiyang.lc.websocketservlet; import java.io.IOException; import java.nio.ByteBuffer; import java.nio.CharBuffer; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.Map; import java.util.Set; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServletRequest; import org.apache.catalina.websocket.MessageInbound; import org.apache.catalina.websocket.StreamInbound; import org.apache.catalina.websocket.WebSocketServlet; import org.apache.catalina.websocket.WsOutbound; @WebServlet("/chat") public class ChatWebSocketServlet extends WebSocketServlet { private final Map<Integer, WsOutbound> map = new HashMap<Integer, WsOutbound>(); /** * */ private static final long serialVersionUID = -1058445282919079067L; @Override protected StreamInbound createWebSocketInbound(String arg0, HttpServletRequest request) { return new ChatMessageInbound(); } class ChatMessageInbound extends MessageInbound { @Override protected void onOpen(WsOutbound outbound) { map.put(outbound.hashCode(), outbound); super.onOpen(outbound); } @Override protected void onClose(int status) { map.remove(getWsOutbound().hashCode()); super.onClose(status); } @Override protected void onBinaryMessage(ByteBuffer buffer) throws IOException { // TODO Auto-generated method stub } @Override protected void onTextMessage(CharBuffer buffer) throws IOException { String msg = buffer.toString(); Date date = new Date(); SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss"); msg = " <font color=green>匿名用户 " + sdf.format(date) + "</font><br/> " + msg; broadcast(msg); } private void broadcast(String msg) { Set<Integer> set = map.keySet(); for (Integer integer : set) { WsOutbound outbound = map.get(integer); CharBuffer buffer = CharBuffer.wrap(msg); try { outbound.writeTextMessage(buffer); outbound.flush(); } catch (IOException e) { e.printStackTrace(); } } } } }
相关文章推荐
- 基于HTML5和Tomcat WebSocketServlet的聊天室简单实现
- HTML5和Tomcat7 WebSocketServlet easyui的聊天室简单实现
- HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
- HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
- 基于html5websocket java实现简单通讯(虽然通了但是...你懂得)
- php+html5基于websocket实现聊天室的方法
- php+html5基于websocket实现聊天室的方法
- HTML5 WebSocket(Client) + JavaWeb(Server) 实现简单的聊天室功能
- HTML5 WebSocket(Client) + JavaWeb(Server)实现简单的聊天室功能
- 基于html5 websocket API简单实现断点上传文件
- HTML5 WebSocket(Client) + JavaWeb(Server) 实现简单的聊天室功能
- 基于html5 websocket API简单实现断点上传文件
- 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行
- 基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。
- 基于jQuery实现简单人工智能聊天室
- 基于Tomcat7、Java、WebSocket的服务器推送聊天室
- 基于html5 localStorage , web SQL, websocket的简单聊天程序
- 基于node的websocket学习笔记二:一个简单的聊天室程序与优化方案
- 基于Tomcat7、Java、WebSocket的服务器推送聊天室
- 基于Tomcat7、Java、WebSocket的服务器推送聊天室