WebSocket实现简单聊天室(java web)

WebSocket实现简单聊天室

       WebSocket简介:WebSocket其实是属于H5规范的一部分,它允许通过JavaScript建立和服务器的连接,从而实现服务器将数据推送给服务器。和传统TCP协议相比,WebSocket的好处在于实现了全双工通信(不需要客户端发出请求,服务器就可以直接向服务端发送数据),现在大部分的浏览器(FireFox,Chrome,Safari,Opera等)都支持该技术,Tomcat8也对于该技术有着很好的实现。

      基于WebSocket实现多人聊天的java类 

              ·用@ServerEndpoint来修饰java类

                    ·@OnOpen修饰建立连接时的方法                 

@OnOpen
	public void start(Session session) throws IOException {

		this.session = session;

	}

                    ·@OnClose修饰断开连接时的方法

@OnClose
	public void end() {
		clientSet.remove(name, this);
		String message = String.format("【%s %s】", name, "离开了聊天室!");
		// 发送消息
		broadcast(message);
	}
                    ·@OnMessage修饰接受消息时的方法
@OnMessage
	public void print(String msg) {
		if (first) {
			name = msg;
			clientSet.put(name, this);
			String message = String.format("【%s %s】", name, "加入了聊天室!");
			// 发送消息
			broadcast(message);
			first = false;
		} else {
			broadcast("【" + name + "】" + ":" + msg);
		}

	}
                    ·@OnError修饰出错时的方法
@OnError
	public void onError(Throwable t) throws Throwable {
		System.out.println("WebSocket服务端错误 " + t);
	}

                    ·broadcast方法——向所有客户端发送消息

 
public void broadcast(String msg) {
		// 遍历服务器关联的所有客户端
		Chat client = null;
		for (String nickname : clientSet.keySet()) {

			try {
				client = (Chat) clientSet.get(nickname);
				synchronized (client) {
					// 发送消息
					client.session.getBasicRemote().sendText(msg);
				}
			} catch (IOException e) {
				System.out.println("聊天错误,向客户端 " + client + " 发送消息出现错误。");
				clientSet.remove(name, client);
				try {
					client.session.close();
				} catch (IOException e1) {
				}
				String message = String.format("【%s %s】", client.name, "已经被断开了连接。");
				broadcast(message);
			}
		}
	}

            需要注意的是:这里的JAVA类不是真正的WebSocket服务端,Tomcat会调用这个类的方法作为WebSocket服务端,而且Tomcat会为每个客户端创建一个类对象。

                ·chatRoom.html---聊天室页面

     

<!DOCTYPE html>
<html>

<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>简单聊天室</title>
<script type="text/javascript">
	// 创建WebSocket对象

	var webSocket = new WebSocket("ws://localhost:8080/WebSocket1/chat");
	var sendMsg = function() {
		var inputElement = document.getElementById('msg');

		if (inputElement.value == '')
			alert("输入内容不为空");
		else {
			// 发送消息
			webSocket.send(inputElement.value);
			// 清空单行文本框
			inputElement.value = "";
		}
	}
	var send = function(event) {
		//设置回车发送消息
		if (event.keyCode == 13) {
			sendMsg();
		}
	};
	webSocket.onopen = function() {

		n = prompt('请给自己取一个昵称:');

		if (n != '' && n != null)
			webSocket.send(n);
		else
			//设置游客登录
			webSocket.send("游客" + Math.random() * 100000000000000000);
		document.getElementById('msg').onkeydown = send;
		document.getElementById('sendBn').onclick = sendMsg;
	};
	// 为onmessage事件绑定监听器,接收消息
	webSocket.onmessage = function(event) {
		var show = document.getElementById('show')
		// 接收、并显示消息
		show.innerHTML += new Date() + "<br/>" + event.data + "<br/>";
		//让聊天框滚动条始终显示新消息
		show.scrollTop = show.scrollHeight;
	}

	webSocket.onclose = function() {
		document.getElementById('msg').onkeydown = null;
		document.getElementById('sendBn').onclick = null;
		Console.log('WebSocket已经被关闭。');
	};
</script>
</head>
<body>
	<div
		style="width: 600px; height: 240px; overflow-y: auto; border: 1px solid #333;"
		id="show"></div>
	<input type="text" size="80" id="msg" name="msg" placeholder="输入聊天内容" />
	<input type="button" value="发送" id="sendBn" name="sendBn" />
</body>
</html>

          

                运行结果

                    


  这个简单的聊天室就做到这里,还有很多东西可以继续完善,比如显示聊天室内在线的用户和悄悄话功能以及UI等等,虽然很简单,但是基本的聊天功能还是可以实现的

     项目代码https://github.com/homewin21/WebSocket

展开阅读全文

没有更多推荐了,返回首页