网络编程 websocket聊天室demo

最新推荐文章于 2023-03-10 14:48:13 发布

闲_风

最新推荐文章于 2023-03-10 14:48:13 发布

阅读量507

点赞数

分类专栏：网络编程文章标签：网络编程 websocket 聊天室

本文链接：https://blog.csdn.net/a15123837995/article/details/87794158

版权

网络编程专栏收录该内容

9 篇文章 0 订阅

订阅专栏

通过websocket实现聊天室主要是将消息进行广播，把消息发送给其他的用户会话中去，通过消息推送，推送到每一个session里面去。

通过一个静态共享变量如List获取所有的session通道，然后遍历这个List，把消息广播出去。

public void broadcast(List<Session> sessions,String msg) {
		for(Session session : sessions) {
			try {
				//发送消息
				session.getBasicRemote().sendText(msg);
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}

这样就实现了聊天室的基本功能。如果需要单点聊天，则在广播时进行一个过滤，传入合适的session列表参数，再进行广播，这样就可以实现私聊的功能。

demo：《websocket聊天室》，里面有详细的代码，本博文中，将会展示前端JSP的代码以及后端处理消息的代码。

实例如图：

前端代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>chat</title>
</head>
<body>
	<div id="container" style=" border:1px solid black; width:400px;height:400px;float:left;">
		<div id="content" style="height:350px;"></div>
		<div style="border-top:1px solid black;width:400px;height:50px;">
			<input id="msg" /><button onclick="sendMsg();">send</button>
		</div>
	</div>
	<div id="userList" style="border:1px solid black;width:150px;height:400px;float:left;"></div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
	//从session域中获取值
	var username = "${sessionScope.username}";
	var ws;
	var target = "ws://localhost:8080/websocket/chat"+"?"+username;//将该值传递到后台
	window.onload = function(){
		if ('WebSocket' in window) {
            ws = new WebSocket(target);
        } else if ('MozWebSocket' in window) {
            ws = new MozWebSocket(target);
        } else {
            alert('WebSocket is not supported by this browser.');
            return;
        }
		
		ws.onmessage = function(event){
			//转为JSON字符串 
			eval("var message = "+event.data+";");
			
			//消息列表，直接追加消息 
			$("#content").append(message.msg);
			
			//用户列表，有用户进入或退出时刷新列表 
			if(undefined!=message.userList){
				//遍历前，先清空 
				$("#userList").html("");
				$(message.userList).each(function(){
					var own = "";
					if(username==this){
						own = "(我)"
					}
					$("#userList").append("<input type='checkbox' checked='checked' value='"+this+"' />"+this+own+"<br/>");
				});
			}
		}
	}
	
	function sendMsg(){
		
		var checked="";
		$.each($('input:checkbox:checked'),function(){
			checked+=$(this).val()+"#P#";
		});
		
		if(""==checked){
			alert("请选中要接收消息的人");
			return;
		}
		
		var msg = $("#msg").val();
		
		//拼接格式消息 
		ws.send(checked+"#S#"+msg);
		$("#msg").val("");
	}
	
</script>
</html>

后端代码：

@ServerEndpoint("/chat")
public class ChatSocket {

	private String username;//保存登录的用户名，一个通道一个用户名
	
	//静态变量，存储所有通道的session和用户名
	private static List<Session> sessionList = new LinkedList<>();
	private static List<String> userList = new LinkedList<>();
	
	//使用Map进行存储
	private static Map<String,Session> map = new HashMap<>();
	
	/**
	 * 建立websocket连接
	 * @param session
	 */
	@OnOpen
	public void open(Session session) {
		username = session.getQueryString();//获取前台传递的值，即“？”后面的字符
		//System.out.println(username);
		
		//将新的会话和用户名放入容器中
		sessionList.add(session);
		userList.add(username);
		
		//将新的会话和用户名放入容器中,用于私聊时找到对应的人
		//可以将整个的sessionList、userList合并到一个map中
		map.put(username, session);
		
		Message message = new Message();
		String msg = "欢迎<font color=blue>"+username+"</font>进入聊天室！<br/>";
		message.setUserList(userList);
		message.setMsg(msg);
		
		//广播
		broadcast(sessionList,message.toJson());
		//toJson方法将message变成json字符串,需要引入Gson的jar包
	}
	
	/**
	 * 广播消息
	 * 将消息发给所有的会话
	 * @param sessions 接收会话的容器
	 * @param msg 发送的消息
	 */
	public void broadcast(List<Session> sessions,String msg) {
		for(Session session : sessions) {
			try {
				//发送消息
				session.getBasicRemote().sendText(msg);
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}
	
	/**
	 * 关闭websocket连接
	 * @param session
	 */
	@OnClose
	public void close(Session session) {
		
		//关闭后，从容器中移除
		sessionList.remove(session);
		userList.remove(username);
		
		//关闭后，从容器中移除
		map.remove(username);
		
		Message message = new Message();
		String msg = "<font color=blue>"+username+"</font>离开聊天室！<br/>";
		message.setUserList(userList);
		message.setMsg(msg);
		
		broadcast(sessionList,message.toJson());
	}
	
	/**
	 * 发送消息
	 *   --私聊
	 *   --群聊
	 * @param session
	 * @param msg
	 */
	@OnMessage
	public void message(Session session,String msg) {
		Message message = new Message();
		//消息与接收人之间，前台使用#S#作为分隔符
		String[] msgs = msg.split("#S#");
		//选择的接收人使用#P#作为分隔符
		String[] tos = msgs[0].substring(0, msgs[0].length()-3).split("#P#");
		if(tos!=null) {
			if(tos.length==map.size()) {
				msg = "<font color=blue>"+username + "</font>【"+new Date().toLocaleString()+"】：<br/>"+msgs[1]+"<br/>";
				message.setMsg(msg);
				broadcast(sessionList,message.toJson());
			}else {
				LinkedList<Session> sessions = new LinkedList<>();
				boolean flag = true;//是否把自己也勾选上了
				for(String name : tos) {
					sessions.add(map.get(name));
					//已经勾选上了自己
					if(username.equals(name)) {
						flag = false;
					}
				}
				//如果没有勾选自己，后台进行消息的回显，即强制性的勾选自己
				if(flag) {
					sessions.add(map.get(username));
				}
				msg = "<font color=red>"+username + "（私聊）</font>【"+new Date().toLocaleString()+"】：<br/>"+msgs[1]+"<br/>";
				message.setMsg(msg);
				broadcast(sessions,message.toJson());
			}
		}else {
			msg = msgs[0].substring(0, msgs[0].length()-3);
			message.setMsg(msg);
			broadcast(sessionList,message.toJson());
		}
	}
}