WebSocket
图
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据,在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输

依赖

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

启动Bean

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class WebSocketConfig {

    /**
     * 注入一个ServerEndpointExporter,该Bean会自动注册使用@ServerEndpoint注解申明的websocket endpoint
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

服务端代码

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

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * 前后端交互的类实现消息的接收推送(自己发送给自己)
 * 
 * "/test/one" 前端通过此URI和后端交互,建立连接
 */
@Slf4j
@ServerEndpoint(value = "/test/one")
@Component
public class OneWebSocket {

    /**
     * 记录当前在线连接数
     */
    private static final AtomicInteger onlineCount = new AtomicInteger(0);

    /**
     * 存放所有在线的客户端
     */
    private static final Map<String, Session> clients = new ConcurrentHashMap<>();

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        // 在线数加1
        onlineCount.incrementAndGet();
        // 存放客户端
        clients.put(session.getId(), session);
        log.info("有新连接[{}]加入,当前在线人数为:{}", session.getId(), onlineCount.get());
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(Session session) {
        // 在线数减1
        onlineCount.decrementAndGet();
        // 踢除关闭客户端
        clients.remove(session.getId());
        log.info("有一连接[{}]关闭,当前在线人数为:{}", session.getId(), onlineCount.get());
    }

    /**
     * 收到客户端消息后调用的方法
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("服务端收到客户端[{}]的消息:{}", session.getId(), message);
        this.sendMsgToAll(session.getId() + "发言:" + message, session);
    }

    @OnError
    public void onError(Session session, Throwable error) {
        log.error("客服端[{}]发生错误", session.getId());
        error.printStackTrace();
    }

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

    /**
     * 群发消息(除自己)
     */
    private void sendMsgToAll(String message, Session fromSession) {
        for (Map.Entry<String, Session> sessionEntry : clients.entrySet()) {
            Session toSession = sessionEntry.getValue();
            // 排除掉自己
            if (!fromSession.getId().equals(toSession.getId())) {
                log.info("服务端给客户端[{}]发送消息{}", toSession.getId(), message);
                toSession.getAsyncRemote().sendText(message);
            }
        }
    }

}

客户端代码

<!DOCTYPE HTML>
<html>
<head>
    <title>My WebSocket</title>
</head>

<body>
<input id="text" type="text" />
<button onclick="send()">Send</button>
<button onclick="closeWebSocket()">Close</button>
<div id="message"></div>
</body>

<script type="text/javascript">
    var websocket = null;

    // 判断当前浏览器是否支持WebSocket, 注意此处要更换为自己的地址
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:18001/test/one");
    } else {
        alert('browser not support websocket')
    }

    // 连接发生错误的回调方法
    websocket.onerror = function() {
        setMessageInnerHTML("connect fail");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event) {
        setMessageInnerHTML("connect success");
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function() {
        setMessageInnerHTML("connect close");
    }

    //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常
    window.onbeforeunload = function() {
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>
</html>

连接携带Token

@Slf4j
@ServerEndpoint(value = "/websocket/one/{token}")
@Component
public class OneWebSocket {
    @OnOpen
    public void onOpen(Session session, @PathParam("token") String token) {
        // 在线数加1
        onlineCount.incrementAndGet();
        // 存放客户端
        clients.put(session.getId(), session);
        log.info("有新连接[{}]加入,token为{},当前在线人数为:{}", session.getId(), token, onlineCount.get());
    }
}

根据Token拒绝连接

@OnOpen
public void onOpen(Session session, @PathParam("token") String token) {
    if (token.length() == 0 || !isValidToken(token)) {
        session.close();
        return;
    }
    // 在线数加1
    onlineCount.incrementAndGet();
    // 存放客户端
    clients.put(session.getId(), session);
    log.info("有新连接[{}]加入,token为{},当前在线人数为:{}", session.getId(), token, onlineCount.get());
}

private boolean isValidToken(String token) {
    // TODO: 根据业务逻辑判断token是否有效
    return true;
}

信息存入

/**
 * 连接建立成功调用的方法
 */
@OnOpen
public void onOpen(Session session, @PathParam("token") String token) throws IOException {
    // 根据token从缓存中查询用户信息,不存在则未登录
    String redisData = redisTemplate.opsForValue().get(RedisKeyEnum.KEY_DESKTOP_USER.value() + token);
    if (Objects.isNull(redisData)) {
        session.close();
    }
    // 将缓存数据转为对象
    LoginRespVo userCacheVo = new ObjectMapper().readValue(redisData, LoginRespVo.class);
    // 放入信息中
    session.getUserProperties().put("schoolId", userCacheVo.getSchoolId());
    // 获取信息
    String tokenSave = (String) session.getUserProperties().get("token");
    // 在线数加1
    onlineCount.incrementAndGet();
    // 存放客户端
    clients.put(session.getId(), session);
    log.info("有新连接[{}]加入,token为{},当前在线人数为:{}", session.getId(), token, onlineCount.get());
}

使用Redis

由于websocket的加载机制与其他不同,所以无法直接使用redisTemplate,需要在项目启动后进行手动注入

第一步:在websocket的类上加入一个静态的redisTemplate

public static RedisTemplate<String, String> redisTemplate;

第二步:在启动完成后进行注入

/**
 * 启动后执行
 */
@Slf4j
@Component
public class StartRun implements ApplicationRunner {

    @Resource
    private RedisTemplate<String, String> redisTemplate;

    @Override
    public void run(ApplicationArguments args) {
        // 给websocket注入
        OneWebSocket.redisTemplate = redisTemplate;
    }

}

wss配置

location /websocket {
      proxy_pass http://localhost:19092;
      proxy_http_version 1.1;
      proxy_set_header    Upgrade    "websocket";
      proxy_set_header    Connection "Upgrade";
      proxy_read_timeout 3600s;
}