基于WebSocket的网页在线多用户多房间群聊

1、上一篇文章写了单聊和单房间群聊的实现，实际运用中当然不可能只能创建一个房间，这一篇文章就介绍多房间的实现。
2、界面展示
![$7GQ4{A5)6{{GQ}W5I%QNO.png

![THG[@N]LYO6O{3N(]N]CBAW.png](https://upload-images.jianshu.io/upload_images/14217092-b83c80670ff462fe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![ZQ7D0}M$A4WZD8})I@01`K.png

3、代码结构

NK1`PSBSZRJON)JZS8~_SU3.png

4、复制上一篇测试成功后的项目复制粘贴，修改项目名称。
WebSocketConfig代码与上一篇不变，controller代码我直接删除了，请自行按需求编写。
修改WebSocketServer代码如下：

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.HashSet;
import java.util.List;
import java.util.Set;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 * writer: holien
 * Time: 2017-08-01 13:00
 * Intent: webSocket服务器
 */
@Slf4j
@ServerEndpoint("/webSocket/chat/{roomName}/{username}")
@Component
public class WebSocketServer {

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

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

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

    @OnMessage
    public void receiveMsg(@PathParam("roomName") String roomName,@PathParam("username") String username,
                           String msg, Session session) throws Exception {
        // 此处应该有html过滤
        msg = username + ":" + msg;
        System.out.println(msg);
        // 接收到信息后进行广播
        broadcast(roomName, msg);
    }

    // 按照房间名进行广播
    public static void broadcast(String roomName, String msg) throws Exception {
        for (Session session : rooms.get(roomName)) {
            System.out.println("session:"+session.getBasicRemote());
            session.getBasicRemote().sendText(msg);
        }
    }
}

5、修改chat.html页面代码如下：

    
    





    

          房间名
        
        用户名
        
        
        

    
    

        
    
    

        
        
        
    

5、接下来测试代码是否能运行成功。主要修改就只是server的代码处理，前端页面只是负责展示返回的消息，这次我找了个好一点的页面，css之类的代码没必要深究。重点将server的代码与上一篇的对比，看懂了就会理解websocket转发的代码逻辑。