天天看點
傳回

網絡程式設計 websocket聊天室demo

        通過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的代碼以及後端處理消息的代碼。

執行個體如圖：

網絡程式設計 websocket聊天室demo

前端代碼：

<%@ 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());
		}
	}
}
網絡程式設計 websocket 聊天室
上一篇: php基于websocket實作的線上聊天室
下一篇: Netty實作聊天室(二) 本地版聊天室具體實作

繼續閱讀