基于HTML5和Tomcat WebSocketServlet的聊天室简单实现

最新推荐文章于 2022-06-13 23:15:17 发布

baiyangliu

最新推荐文章于 2022-06-13 23:15:17 发布

阅读量9.5k

点赞数 5

分类专栏： Java tomcat

本文链接：https://blog.csdn.net/baiyang_liu/article/details/8261089

版权

Java 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

tomcat

7 篇文章 0 订阅

订阅专栏

不多说了，直接看代码……

（补充说明：最近有网友说不能运行，估计是Tomcat版本太低了~~Tomcat7以后才支持WebSocket的，具体哪个小版本号忘记了，用最新版本一定可以的）

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="连接" οnclick="chat(this);"> <input
			type="button" value="发送" οnclick="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();
				}
			}
		}
	}
}

本文地址

baiyangliu

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
5
评论
基于HTML5和Tomcat WebSocketServlet的聊天室简单实现

不多说了，直接看代码……index.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% String path = request.getContextPath(); String WsBasePath = "ws://" + request.ge
复制链接

扫一扫