websocket聊天室，单聊，群聊的基本实现

引入依赖 pom.xml

 
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.springframework.boot
            spring-boot-starter-websocket
        
        
            org.projectlombok
            lombok
        
        
            com.google.code.gson
            gson
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

yml配置

server:
  port: 8080

websocket配置类

@Configuration
public class WebsocketConfiguration {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

用来存放用户信息的bean

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class Message {

    private String userId;

    private String message;
}

一对一聊天实现

@ServerEndpoint("/chat/room/one")
@Component
@Slf4j
public class MyOneToOneServer {
    /**
     * 用于存放所有在线客户端
     */
    private static Map clients = new ConcurrentHashMap();

    private Gson gson = new Gson();

    @OnOpen
    public void onOpen(Session session) {
        log.info("有新的客户端上线: {}", session.getId());
        clients.put(session.getId(), session);
        Message message = new Message(session.getId(),"收到了");
        this.sendTo(message);
    }

    @OnClose
    public void onClose(Session session) {
        String sessionId = session.getId();
        log.info("有客户端离线: {}", sessionId);
        clients.remove(sessionId);
    }

    @OnError
    public void onError(Session session, Throwable throwable) {
        String sessionId = session.getId();
        if (clients.get(sessionId) != null) {
            log.info("发生了错误,客户端下线", sessionId);
            clients.remove(sessionId);
        }
        throwable.printStackTrace();
    }

    @OnMessage
    public void onMessage(String message) {
        log.info("收到客户端发来的消息: {}", message);
        this.sendTo(gson.fromJson(message, Message.class));
    }

    /**
     * 发送消息
     *
     * @param message 消息对象
     */
    private void sendTo(Message message) {
        Session s = clients.get(message.getUserId());
         System.out.println(s);
        if (s != null) {
            try {
                s.getBasicRemote().sendText(message.getMessage());
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

群聊实现

@ServerEndpoint("/chat/room/group")
@Component
@Slf4j
public class MyWebsocketServer {
    /**
     * 存放所有在线的客户端
     */
    private static Map clients = new ConcurrentHashMap();
    private Gson gson = new Gson();

    @OnOpen
    public void onOpen(Session session) {
        log.info("有新的客户端连接了: {}", session.getId());
        //将新用户存入在线的组
        clients.put(session.getId(), session);
    }

    /**
     * 客户端关闭
     * @param session session
     */
    @OnClose
    public void onClose(Session session) {
        log.info("用户" + session.getId() + "离线");
        //将掉线的用户移除在线的组里
        clients.remove(session.getId());
    }

    /**
     * 发生错误
     * @param throwable e
     */
    @OnError
    public void onError(Throwable throwable) {
        throwable.printStackTrace();
    }


    /**
     * 收到客户端发来消息
     * @param message  消息对象
     */
    @OnMessage
    public void onMessage(String message) {
        log.info("收到消息：" + message);
        this.sendAll(message);
    }


    /**
     * 群发消息
     * @param message 消息内容
     */
    private void sendAll(String message) {
        for (Map.Entry sessionEntry : clients.entrySet()) {
            sessionEntry.getValue().getAsyncRemote().sendText(message);
        }
    }

}

启动类

@SpringBootApplication
public class WebsocketDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(WebsocketDemoApplication.class, args);
    }
}

前端实现

// var ws = new WebSocket("ws://localhost:8080/chat/room/one");//单聊
var ws = new WebSocket("ws://localhost:8080/chat/room/group");//群聊
    ws.onopen = function(evt) {  //绑定连接事件
        console.log("Connection open ...");
        var msg = {
            userId: 30,
            message: "我来了"
        }//单聊要发送json字符串包含对象userId与message，群聊则直接发送字符串
        ws.send(JSON.stringify(msg));//单聊
		//ws.send("大家好，我是零三");
    };

    ws.onmessage = function(evt) {//绑定收到消息事件
        console.log( "Received Message: " + evt.data);
    };

    ws.onclose = function(evt) { //绑定关闭或断开连接事件
        console.log("Connection closed.");
    };