学习笔记-websocket

后端-springboot整合

pom.xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

WebSocketConfig.java

@Configuration
public class WebSocketConfig {

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

}

WebSocketServer.java

// 如果有拦截器，需要放开/imserver
@ServerEndpoint(value="/imserver/{username}")
@Component
public class WebSocketServer{
    private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);

    public static final Map<String, Session> sessionMap = new ConcurrentHashMap<>();

    @OnOpen
    // 当有用户连接时
    public void onOpen(Session session,@PathParam("username")String username){
        sessionMap.put(username,session);
        log.info("有新用户加入,username={},当前在线人数：{}",username,sessionMap.size());
        JSONObject result = new JSONObject();
        JSONArray array = new JSONArray();
        result.put("users",array);
        for(Object key:sessionMap.keySet()){
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("username",key);
            // array : [{"username":"admin"},{"username":"xxx"}]
            array.add(jsonObject);
        }
        // result : {"users":[{"username":"admin"},{"username":"xxx"}]}
        // 发送所有在线的客户端
        sendAllMessage(result.toJSONString());
    }

    @OnClose
    // 当有用户离开时
    public void onClose(Session session,@PathParam("username")String username){
        sessionMap.remove(username);
        log.info("有一个连接关闭，移除username={}用户的session，当前在线用户人数为：{}",username,sessionMap.size());
        // 也可以发给其他在线用户
    }

    @OnMessage
    // 收到客户端发送的消息时
    // 消息中转
    public void onMessage(String message,Session session,@PathParam("username")String username){
        log.info("服务端收到用户username={}的消息：{}",username,message);
        JSONObject obj = JSONObject.parseObject(message);
        // to 表示发送给哪个用户
        String toUsername = obj.getObject("to",String.class);
        // text 发送的文本消息
        String text = obj.getObject("text",String.class);
        // 根据username获取session
        Session toSession = sessionMap.get(toUsername);
        if(toSession!=null){
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("from",username);
            jsonObject.put("text",text);
            this.sendMessage(jsonObject.toJSONString(),toSession);
            log.info("发送给用户user={},消息：{},toUsername,jsonObject.toString()");
        }else{
            log.info("发送失败，未找到用户username={}的session",toUsername);
        }
    }

    @OnError
    public void onError(Session session,Throwable error){
        log.error("发送错误");
        error.printStackTrace();
    }

    private void sendMessage(String message,Session toSession){
        try{
            log.info("服务端给客户端[{}]发送消息:{}",toSession.getId(),message);
        }catch(Exception e){
            log.error("服务端发送消息给客户失败",e);
        }
    }



    // 发送所有在线的客户端
    private void sendAllMessage(String message){
        try{
            for(Session session:sessionMap.values()){
                log.info("服务端给客户端【{}】发送消息",session.getId(),message);
                session.getBasicRemote().sendText(message);
            }
        }catch(Exception ex){
            log.error("服务端发送消息给客户失败",ex);
        }
    }

}

前端

let socket = null;
// 登录人user
let user = {
    username:xxx
}
// 在线人员
let chatUser = []
function init(){
    // 获取用户名
    let username = user.username
    if(typeOf(WebSocket)=="undefined"){
        console.log("您的浏览器不支持WebSocket")
    }else{
        console.log("您的浏览器支持WebSocket")
        let socketUrl = "ws://xxx:xx/imserver/"+username
        if(socket!=null){
            socket.close()
            socket = null
        }
        // 开启websocket服务
        socket = new WebSocket(socketUrl)
        // 打开事件
        socket.onopen = function(){
            console.log("websocket已打开");
        }
        // 获取消息事件
        socket.onmessage = function(msg){
            console.log("收到数据==="+msg.data)
            let data = JSON.parse(msg.data)
            if(data.uers){
                // {"users":[{"username":"admin"},{"username":"xxx
                // 在线人员
                chatUser = data.users
            }else{
                // data : {"from":"fromUsername","text":""}
                console.log(data)
            }
        }
        // 关闭事件
        socket.onclose = function(){
            console.log("websocket已关闭");
        }
        // 发生错误
        socket.onerror = function(){
           console.log("websocket发生错误"); 
        }
    }
}

function send(msg){
    if(typeOf(WebSocket)=="undefined"){
        console.log("您的浏览器不支持WebSocket")
    }else{
        console.log("您的浏览器支持WebSocket")
        let message = {from:user.username,to:chatUser[0],text:msg}
        socket.send(JSON.stringify(message))
    }
}