一、前言

《通义千问AI落地——下篇》如约而至。Websocket在这一类引用中，起到前后端通信的作用。因此，本文将介绍websocket在这类应用场景下的配置、使用、注意事项以及ws连接升级为wss连接等；如下图，本站已经使用了wss连接：

二、后端接口

后端接口主要涉及Websocket的配置、握手认证、消息收发等，我们来逐一讲解：

2.1、WebSocket配置


import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Lazy;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.scheduling.TaskScheduler;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@EnableWebSocketMessageBroker
@Configuration
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    private TaskScheduler messageBrokerTaskScheduler;

    @Autowired
    public void setMessageBrokerTaskScheduler(@Lazy TaskScheduler taskScheduler) {
        this.messageBrokerTaskScheduler = taskScheduler;
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 指定允许握手的域名
        //String[] allowedOrigins = {"www.microblog.store", "xxx"};

        registry.addEndpoint("/ws/handshake")
                .setAllowedOrigins("*")  //如果指定握手域名，可以填入allowedOrigins 
                .setHandshakeHandler(new UserHandshakeHandler());
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/ws")
                .setUserDestinationPrefix("/user")
                // 客户端订阅消息的请求前缀，topic一般用于广播推送，queue用于点对点推送
                .enableSimpleBroker("/broad", "/queue")
                .setHeartbeatValue(new long[]{10000, 20000})
                .setTaskScheduler(this.messageBrokerTaskScheduler);
    }
}

2.2、握手认证


import cn.hutool.core.util.RandomUtil;
import com.microblog.config.auth2.LoginContext;
import com.microblog.vo.BaseUserVO;
import com.sun.security.auth.UserPrincipal;
import lombok.extern.slf4j.Slf4j;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.support.DefaultHandshakeHandler;

import java.security.Principal;
import java.util.Map;

import static com.microblog.tools.UserUtils.getUserFromCookie;

/**
 * websocket握手验证处理
 */
@Slf4j
public class UserHandshakeHandler extends DefaultHandshakeHandler {

    @Override
    protected Principal determineUser(ServerHttpRequest request, WebSocketHandler wsHandler,
                                      Map<String, Object> attributes) {

        BaseUserVO vo = LoginContext.getLogin();

        if (vo != null) {
            log.info("获取到握手用户信息：{}", vo.getUid());
            return new UserPrincipal(vo.getUid());
        }

        BaseUserVO sysUser = getUserFromCookie(request);

        if (sysUser != null) {
            return new UserPrincipal(sysUser.getUid());
        }

        String id = "anonymity" + RandomUtil.randomNumbers(5);

        log.error("获取用户信息失败，准备使用匿名信息握手,握手id：{}", id);

        return new UserPrincipal(id);
    }

}

注意，上述认证器的认证过程，可以根据你的系统实际情况而定，在这里我们分享以下几种方式：

通过本地线程变量获取(需要在用户登录时存入):


/**
 * FileName: LoginContext
 * Author:   wxz
 * Date:     2024/7/25 22:08
 * Description: 登陆信息上下文
 */
@Log4j2
public class LoginContext {
    private static final ThreadLocal<BaseUserVO> login = new ThreadLocal<>();

    public static BaseUserVO getLogin() {
        return login.get();
    }

    public static void setLogin(BaseUserVO vo) {
        LoginContext.login.set(vo);
    }

    public static String getId() {
        if (!isLogin()) {
            return null;
        }
        return getLogin().getUid();
    }

    public static boolean isLogin() {
        return getLogin() != null;
    }

    public static void setLogin(Object principal) {
        JwtUser user = (JwtUser) principal;
        BaseUserVO vo = new BaseUserVO();
        BeanUtil.copyPropertiesIgnoreNull(user, vo);
        setLogin(vo);
    }
}

通过request上下文获取到用户登录信息(请求头AUTHORIZATION信息)
通过请求头中的cookie获取信息

由于ws/wss握手请求是非http请求,因此上面两种请求大概率是获取不到用户信息的，因此最有可能能获取到用户信息的方法就是第三种(包括本系统)。获取到用户登录信息以后，在握手认证器里面 return new UserPrincipal(用户id) 就行。

2.3、消息收发

由于这里需要前后端进行双向的消息交互，因此这里的接口可以大致区分为：接收前端发送的消息和将GPT生成的消息发送给前端用户:

2.3.1、接收消息

import java.security.Principal;

@Controller
@AllArgsConstructor
@Slf4j
@CrossOrigin
public class WebSocketController {
    private final IChatGPTService service;

    @MessageMapping("/chat/send")
    public void chat(@Payload ChatMessageRequest message, Principal principal) throws NoApiKeyException,
            InputRequiredException {
        service.chat(message, principal);
    }
}

接收前端消息如上，其中ChatMessageRequest 实体属性按需而定，Principal实体包含了消息发送者的身份信息，其中，对我们有用的方法就是 public String getName() 这个方法返回的就是我们在上面认证过程中填入的用户id。至于收到用户的消息以后如何处理，我们已经在上篇详细介绍过了，这里不再赘述。

2.3.2、发送消息

import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Service;

import java.security.Principal;
import java.util.Optional;

/**
 * FileName: ChatMessageServiceImpl
 * Author:   wxz
 * Date:     2024/7/24 16:06
 * Description:
 */
@Service
@AllArgsConstructor
@Log4j2
public class SocketServiceImpl implements ISocketService {
    private final SimpMessagingTemplate template;

    @Override
    public void sendMessage(ChatMessage message, Principal principal) {
        template.convertAndSendToUser(principal.getName(), "/queue/gpt", message.getContent());
    }
}

至于消息发送，就入上文一般简单。但是值得注意的是， "/queue/gpt" 这个发送地址别搞错了： /queue 这一级是我们在上文中 configureMessageBroker里面配置的前缀地址：

而/gpt,这一级,是我们自定义的消息接受地址,这有点类似于 Controller 里面的 @RequestMapping("xxx") 入口和控制器里面方法的 @GetMapping("xxx")/@PostMapping("xxx") 注解类似。

至此，后端内容我们已经介绍完了，接下来我们继续介绍前端内容（PS：本站使用的是NuxtJs2+Vue2开发,因此在你的应用中,注意版本）。

三、前端接口

3.1、握手和消息接收

 methods: {
      //socket握手
      handShake() {
             this.client = new Client({
                 //连接地址要加上项目跟地址: 
                 brokerURL: `${process.env.socketURI}`,
                 onConnect: () => {
                     this.isSend = true
                     // 连接成功后订阅ChatGPT回复地址
                     this.client.subscribe('/user/queue/gpt', (message) => {
                         let msg = message.body
			 //消息处理的方法
                         this.handleGPTMsg(msg)
                     })
                 }
             })
             // 发起连接
             this.client.activate()
         },
}

有一下情况需要注意:

上述的brokerURL，我们一般在环境文件里面配置，(本站)[https://www.microblog.store/]使用的配置为: socketURI: 'wss://www.microblog.store/wss'
为了保证websocket正常和后端建立连接，我们需要在页面加载完成以后立即执行上述方法，即：

   mounted() {
        this.handShake()
    },

订阅地址 /user/queue/gpt 的构成：还记得我们在后端接口配置的时候，提到的两个注意点吗？分别是：

.setUserDestinationPrefix("/user")
// 客户端订阅消息的请求前缀，topic一般用于广播推送，queue用于点对点推送
.enableSimpleBroker("/broad", "/queue")

 template.convertAndSendToUser(principal.getName(), "/queue/gpt", message.getContent());

再来看一眼我们的订阅地址： /user/queue/gpt ，没错，这个订阅地址就是由setUserDestinationPrefix("/user") 地址、.enableSimpleBroker("/broad", "/queue") 地址和 template.convertAndSendToUser(principal.getName(), "/queue/gpt", message.getContent()) 这里面的地址构成，其中 "/user" 有点类似于我们的springboot应用的 @RequestMapping，而后面两级就不用我再解释了吧？

3.2、消息发送

 try {
        this.client.publish({
            destination: '/ws/chat/send',
            body: JSON.stringify(chatMessage)
        })
  } catch (e) {
        console.log("socket connection error:{}", e)
}

消息发送拢共也就那么几行代码，非常简单。注意第一级为 /ws ，这一级我们同样在上文中配置了： setApplicationDestinationPrefixes("/ws") ，这个配置就类似于我们的springboot应用的 content-path

四、Nginx配置

为了将ws连接升级为wss连接，我们需要借助Nginx。以下就是Nginx的配置：

http {
      # 定义上游服务器:websocket ws升级为wss连接
    upstream webSocket {
        server 127.0.0.1:xxx; # 你服务器上面websocket运行的端口号
    }

    server {
        listen 443 ssl;
        server_name www.microblog.store;

        # WebSocket握手升级为wss
        location = /wss {
            proxy_pass http://webSocket(这里指向的就是上面定义的上游服务)/服务的content-path地址/ws/handshake;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $http_host;
            proxy_cache_bypass $http_upgrade;
        }
    }

}

我们来解析以下 proxy_pass http://webSocket(这里指向的就是上面定义的上游服务)/服务的content-path地址/ws/handshake;这个属性：

第一级——webSocket节点：这个节点（或者说是一个配置变量）指向的就是我们上面配置的这个上游服务：

  upstream webSocket {
        server 127.0.0.1:xxx; # 你服务器上面websocket运行的端口号
    }

第二级——服务的content-path地址：这个就是你的服务访问地址
第三级——/ws/handshake：这一级就是我们在后端接口部分定义的握手地址。

综上，关于《通义千问AI》落地问题，我们分为上中下三篇文章分别进行了讲述，如果你使用起来有任何问题，欢迎在评论区给我留言，一起交流进步。

《通义千问AI落地—下》：WebSocket详解