【websocket】使用websocket完成简单的聊天室

最新推荐文章于 2025-03-09 08:56:21 发布

evan_qb

最新推荐文章于 2025-03-09 08:56:21 发布

阅读量459

点赞数

分类专栏： Java学习 # javaweb

本文链接：https://blog.youkuaiyun.com/Evan_QB/article/details/80803321

版权

Java学习同时被 2 个专栏收录

193 篇文章

订阅专栏

javaweb

31 篇文章

订阅专栏

本文介绍如何使用WebSocket技术实现一个简单的群聊应用。通过引入必要的Maven依赖，编写Java后端代码来处理连接、消息发送、关闭及错误处理，并提供前端页面以创建聊天室并发送消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用websocket实现简单的群聊功能:

首先我们引入相关的maven依赖:

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
</dependency>
<dependency>
    <groupId>org.apache.tomcat</groupId>
    <artifactId>tomcat-websocket-api</artifactId>
    <version>8.0.24</version>
</dependency>

然后我们在后台编写websocket代码:

我们编写四个方法：OnOpen()、message()、close()、onError()方法，分别作为进入聊天室、发送聊天信息、离开聊天室、程序错误，用一个Map<String,Session>集合存储聊天信息

@ServerEndpoint(value="/index")
public class WebSocket {
	public static Map<String,Session> conns = new HashMap<String, Session>();
	
	/**
	 * 前台打开链接将执行的方法
	 * @param session
	 * @param config
	 */
	@OnOpen
	public void OnOpen(Session session,EndpointConfig config) {
		Session s = null;
		for (String conn : conns.keySet()) {
			s = conns.get(conn);
			synchronized (s) {
				try {
					s.getBasicRemote().sendText(session.getId() + "<span style='color:green'>进入了聊天室.....</span>");
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
		}
		conns.put(session.getId(), session);
	}
	
	/**
	 * 用于处理前端发送的请求
	 * @param message
	 * @param session
	 */
	@OnMessage
	public void message(String message,Session session) {
		Session s = null;
		for (String conn : conns.keySet()) {
			s = conns.get(conn);
			synchronized (s) {
				try {
					s.getBasicRemote().sendText((session.getId() == s.getId() ? "我":session.getId()) + "说:" + message);
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
		}
		
	}
	
	/**
	 * 关闭连接，前端close方法时调用
	 * @param session
	 */
	@OnClose
	public void close(Session session) {
		Session s = null;
		for (String conn : conns.keySet()) {
			s = conns.get(conn);
			if (s != session) {
				synchronized (s) {
					try {
						s.getBasicRemote().sendText(session.getId() + "<span style='color:green'>离开了聊天室....</span>");
					} catch (IOException e) {
						e.printStackTrace();
					}
				}
			}
		}
		conns.remove(session.getId());
	}
	
	/**
	 * 出现错误
	 * @param session
	 * @param error
	 */
	public void onError(Session session,Throwable error) {
		System.out.println("500");
		error.printStackTrace();
	}
	
	
}

接下来我们编写前端创建聊天室链接并进行消息发送:

<!DOCTYPE HTML>
<html>
<head>
	<title>聊天室</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		.content{
			width: 400px;
			height:400px;
			border: 1px solid #ccc;
		}
		
		.inp{
			width: 400px;
			height: 50px;
		}
	</style>
</head>
<body>
    <h2>聊天室</h2>
    <div class="content" >
    	<ul id="output">
    		
    	</ul>
    </div>
    <span>请输入:</span>
    <div>
        <form action="">
            <input id="in" name="message" class="inp"  type="text"><br/>
            <br/> <input οnclick="sendData()" value="发送" type="button" />
        </form>
    </div>
</body>
<script type="text/javascript">
	var ws;
	var wsUrl = "ws://localhost:8080/WebSocket/index";
	ws = new WebSocket(wsUrl);
	//接收后台getBasicRemoto().sendText()的内容
	ws.onmessage = function(msg){
		writeToScreen(msg.data);
	}
	
	//发送消息
	function sendData(){
		
		var message = document.getElementById("in").value;
		ws.send(message);
		message.value = "";
	}
	//发生错误
	ws.onerror = function(msg){
		writeToScreen('<span style="color:red;">系统出错啦</span>' + msg.data);
	}
	//将聊天信息写入到窗口中
	function writeToScreen(message){
		var pre = document.createElement("li");
		pre.style.wordWrap = "break-word";
		pre.innerHTML = message;
		var output = document.getElementById("output");
		output.appendChild(pre);
	}
	//当页面关闭，调用后台的close方法
	window.onbeforeunload = function(){
		ws.close();
	}	
	
</script>
</html>

结果如下: