UE 的Matchmaker 提供的 url 无法供前端直接链接像素流的问题

项目场景：

提示：这里简述项目相关背景：

前端项目中链接UE5.0中Matchmaker提供的中转链接加载像素流

---

问题描述

提示：这里描述项目中遇到的问题：

UE 的Matchmaker 提供的 url无法供前端直接链接像素流的问题

原因分析：

提示：这里填写问题的分析：

例如：Matchmaker提供的功能，是直接重定向路由，不可以直接用该路径链接像素流websokect

---

解决方案：

提示：这里填写该问题的具体解决方案：
1.修改Matchmaker中的代码，添加一个接口，让其提供当前可链接的像素流地址
2.客户端在链接之前，获取当前可以链接的像素流地址

1.修改Matchmaker中的代码，添加一个接口：

关键代码如下

// 提供当前可以链接的像素流地址1
	app.get('/list_address', (req, res) => {
		// 跨域
		res.header('Access-Control-Allow-Origin', '*');
		res.header('Access-Control-Allow-Methods', 'GET, POST');
		res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
		// 获取当前可以链接的cirrusServer 像素流服务
		cirrusServer = getAvailableCirrusServer();
		if (cirrusServer != undefined) {
			// 拼接像素流地址
			const { address, port } = cirrusServer
			const data = {
				type: 'can',
				url: `ws://${address}:${port}`
			}
			res.end(JSON.stringify(data))
		} else {
			// 当前没有可链接的像素流服务
			res.end(JSON.stringify({
				type: 'wait'
			}))
		}
	});

2.修改app.js中的链接websocket的代码：

关键代码如下

// 提供当前可以链接的像素流地址1
	
function connect() {
    "use strict";

    window.WebSocket = window.WebSocket || window.MozWebSocket;

    if (!window.WebSocket) {
        alert('Your browser doesn\'t support WebSocket');
        return;
    }

    // ws = new WebSocket(window.location.href.replace('http://', 'ws://').replace('https://', 'wss://'));
    function real_connect(){
    	// 这里的223 端口，用自己的
        fetch('http://127.0.0.1:223/list_address').then((response) => response.json()).then(res => {
            console.log('------------------------------->',{res})
            const { type, url } = res;
            if (type == 'can') {
                ws = new WebSocket(url)
                wsWatch(ws)
            } else if (type == 'wait') {
                setTimeout(() => {
                    real_connect()
                }, 3000);
            }
        })
    }
    real_connect()
    

    function wsWatch(ws){
        ws.onmessage = function(event) {
        let msg = JSON.parse(event.data);
        if (msg.type === 'config') {
            console.log("%c[Inbound SS (config)]", "background: lightblue; color: black", msg);
            onConfig(msg);
        } else if (msg.type === 'playerCount') {
            console.log("%c[Inbound SS (playerCount)]", "background: lightblue; color: black", msg);
        } else if (msg.type === 'offer') {
            console.log("%c[Inbound SS (offer)]", "background: lightblue; color: black", msg);
            onWebRtcOffer(msg);
        } else if (msg.type === 'answer') {
            console.log("%c[Inbound SS (answer)]", "background: lightblue; color: black", msg);
            onWebRtcAnswer(msg);
        } else if (msg.type === 'iceCandidate') {
            onWebRtcIce(msg.candidate);
        } else if(msg.type === 'warning' && msg.warning) {
            console.warn(msg.warning);
        } else {
            console.error("Invalid SS message type", msg.type);
        }
    };

    ws.onerror = function(event) {
        console.log(`WS error: ${JSON.stringify(event)}`);
    };

    ws.onclose = function(event) {
        console.log(`WS closed: ${JSON.stringify(event.code)} - ${event.reason}`);
        ws = undefined;
        is_reconnection = true;

        // destroy `webRtcPlayerObj` if any
        let playerDiv = document.getElementById('player');
        if (webRtcPlayerObj) {
            playerDiv.removeChild(webRtcPlayerObj.video);
            webRtcPlayerObj.close();
            webRtcPlayerObj = undefined;
        }

        showTextOverlay(`Disconnected: ${event.reason}`);
        let reclickToStart = setTimeout(start, 4000);
    };
    }
    
}