WebSocket实现多房间聊天室

WebSocket简介

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

聊天室的实现

最近在项目中要实现一个聊天功能，所以就想到了使用WebSocket，此聊天室是类似QQ聊天形式，有头像加文字，自己发送的消息和别人的消息可以很明显区分。下载javax.websocket.jar，使用注解方式实现了一个简单的多房间聊天demo，通过打开多个index.html页面，输入相同的房间名，进入房间后可以相互通信，不同房间不能互相通信，不同用户通过websocket的session自己分配的id来区分，自己的头像和别人的头像使用两张图片区分，实际开发可以使用用户名和用户的头像来区分。连接到服务器的url中，roomName是一个路径参数，即在index.html中获取到房间名。多房间的原理其实就是把多个用（session）放在roomName对应的set集合中，每次广播信息只在房间名对应的set集合中广播，实现房间聊天信息的隔离。

服务器端代码

@ServerEndpoint("/webSocket/chat/{roomName}")
public class WsServer {

    // 使用map来收集session，key为roomName，value为同一个房间的用户集合
    // concurrentMap的key不存在时报错，不是返回null
    private static final Map> rooms = new ConcurrentHashMap();

    @OnOpen
    public void connect(@PathParam("roomName") String roomName, Session session) throws Exception {
        // 将session按照房间名来存储，将各个房间的用户隔离
        if (!rooms.containsKey(roomName)) {
            // 创建房间不存在时，创建房间
            Set room = new HashSet<>();
            // 添加用户
            room.add(session);
            rooms.put(roomName, room);
        } else {
            // 房间已存在，直接添加用户到相应的房间
            rooms.get(roomName).add(session);
        }
        System.out.println("a client has connected!");
    }

    @OnClose
    public void disConnect(@PathParam("roomName") String roomName, Session session) {
        rooms.get(roomName).remove(session);
        System.out.println("a client has disconnected!");
    }

    @OnMessage
    public void receiveMsg(@PathParam("roomName") String roomName,
                           String msg, Session session) throws Exception {

        //创建时间
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm");
        Date date =new Date();
        String time = simpleDateFormat.format(date);
        String message;
        //可以在此保存数据到数据库

        for (Session session1 : rooms.get(roomName)) {
            //判断是否发送给自己
            if(session1.equals(session)) {
                //发送给自己
                message = "
 "+session1.getId()+" "+time+" "+msg+"
";
            }else {
                //发送给别人
                message = "
 "+session1.getId()+" "+time+" "+msg+"
";
            }
            //发送
            session1.getBasicRemote().sendText(message);

        }
    }

前台页面代码

	

		
		
		
		
		
		
		
		
		

		
		
		

		

	

	

	
		

			

			

				

					


						XXX聊天室
					
				
			
		
		
		    
		房间名
		
		
		
		

			

				

					

						

							

								最新消息：2018-06-21  聊天窗口
							
							

								

									

										

										
									
								
								

									

										


											


												

												

												
													
												  
												
												
											
										
									
								
							
						
					
				
			
		
		

效果

源码下载：https://github.com/shikuLi/ChatRoom