使用html5中webSocket开发一个网页版聊天室(后台使用java)

大家可以对比一下，ajax版的网页聊天室和webSocket版的网页聊天室有什么区别和不同点。

先打开我的火狐浏览器，再依次打开我的Microsoft Edge浏览器和IE11浏览器，

在火狐浏览器中发送消息给服务器端，如下：

扫描二维码关注公众号，回复： 12719017 查看本文章

前端页面代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5学习(webSocket)</title>
<link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
<h3>html5学习(webSocket)</h3>
<input type="text" id="chatMessage" />
<input type="button" style="width: 100px;" value="发送" onclick="sendMsg();" />
<input type="button" style="width: 100px;" value="关闭" onclick="closeMsg();" />
<div id="show" style="height: 600px;overflow: auto;">
</div>
</body>
<script type="text/javascript">

function $(elementId) {
	return document.getElementById(elementId);
}

var websocket = null;
if ('websocket' in window) {
	console.log(window);
//注意：测试的时候，地址也要写http://localhost:8888/ 不能写http://127.0.0.1:8888/
	websocket = new WebSocket("ws://localhost:8888/html5Demo/MsgWebSocket");
} else {
	$('show').innerHTML += "警告!您的浏览器不支持webSocket!";
}

//打开websocket连接
websocket.onopen = function() {
// WebSocket已连接上，使用send()方法发送数据
var str1 = 'WebSocket已连接上....模拟聊天室';
var str2 = '<font style="color: blue; font-size: 20px;">' + str1 + '</font><br />';
	$('show').innerHTML += str2;
};

//向服务器端发送信息
function sendMsg() {
	var msg = $('chatMessage').value;
	$('chatMessage').value = '';
	websocket.send(msg);
}

//接收服务端推送过来的消息
websocket.onmessage = function(evt) {
	var serverReturnData = evt.data;
	console.log(serverReturnData);
	document.getElementById('show').innerHTML += "收到消息：" + serverReturnData
			+ "<br />";
};

//关闭
function closeMsg() {
	websocket.send("有用户掉线了！！");
	websocket.close();
}

//浏览器关闭前，回调函数，防止服务器端抛异常
window.onbeforeunload = function() {
	websocket.close();
}
</script>
</html>

后端java代码

package com.test;

import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.OnOpen;
import javax.websocket.OnMessage;
import javax.websocket.OnClose;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint(value = "/MsgWebSocket")
public class MsgWebSocket {

	// 当每一个连接来的时候都会实例化一个MsgWebSocket
	private static CopyOnWriteArraySet<MsgWebSocket> webSockets = new CopyOnWriteArraySet<>();
	// 与任何一个客户端的连接都有会话
	private Session session;

	@OnOpen
	public void onOpen(Session session) {
		this.session = session;
		webSockets.add(this);
		System.out.println("***有新用户上线***");
//		sendMsgToOthers("有新用户上线");
		sendMsgToOthers("我上线啦....");
	}

	@OnClose
	public void onClose(Session session) {
		this.session = session;
		webSockets.remove(this);
	}

	// 给其他所有用户发送消息，不给自己发
	private void sendMsgToOthers(String message) {
		for (MsgWebSocket item : webSockets) {
			System.out.println("***" + this.session + "***" + item.session.getId());
			// 不给自己发送(谁发的消息，就不给谁转发)
//			if (this.session.getBasicRemote().equals(item.session.getBasicRemote())) {
//				continue;
//			}
			// 封装一个给每个session发送消息的方法
			item.sendMessage(this.session.getId() + "说：" + message);
		}
	}

	private void sendMessage(String message) {

		try {
			this.session.getBasicRemote().sendText(message);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

	}

	/*
	 * 当服务器接收到消息的时候，做消息转发
	 */
	@OnMessage
	public void onMessage(String message, Session session) {
		System.out.println("来自客户端的消息：" + message);
		// 当有消息来临时，给除去自己外的所有人发送消息
		sendMsgToOthers(message);
	}
}

大家可以根据我的案例，自己测试一下！

以下几篇文章也可以参考

Eclipse创建WebSocket

Tomcat7 配置 WebSocket

WebSocket快速入门

eclipse websocket示例

使用html5中webSocket开发一个网页版聊天室(后台使用java)

猜你喜欢