尝试连接两名用户加入同一Twilio会议时出现多类错误及TwiML问题

遇到的错误 #

1. 初始连接错误：

error:  ConnectionError: ConnectionError (53000): Raised whenever a signaling connection error occurs that is not covered by a more specific error code.

2. 网关挂断错误：

Received an error from the gateway: ConnectionError: ConnectionError (31005): Error sent from gateway in HANGUP
    at ConnectionError.TwilioError [as constructor]

3. TwiML日志错误：

TwiML response body too large

实现流程与代码 #

1. 匹配后创建会议逻辑 #

用户在等候室匹配成功后，调用以下函数创建会议，该函数被包裹在空依赖的useEffect中：

function createTwilioConference(username, matchedUser){
    const pairedUsers ={}
    pairedUsers['roomName'] = sortUsersAlphabetically([username,matchedUser]).join('')
    pairedUsers['participantLabel'] = sortUsersAlphabetically([username,matchedUser])
    pairedUsers['currUser'] = username
    pairedUsers['matchedUser'] = matchedUser
    axios.post(`${profileURL}voice_chat/rooms`,pairedUsers)
        .then(res =>{
            console.log('twilio call created', res.data)
        })
}

2. 生成的TwiML响应 #

两名匹配用户收到的TwiML如下（会议室名称为用户名按字母排序后拼接）：

<?xml version="1.0" encoding="UTF-8"?><Response><Dial><Conference participantLabel="['emmanuelS21', 'testingUser']" startConferenceOnEnter="true">emmanuelS21testingUser</Conference></Dial></Response>

3. 进入会话后发起通话逻辑 #

用户被重定向到结对会话后，通过以下useEffect发起通话，发现该useEffect被调用了四次：

useEffect(() => {
    console.log('!!!*** how many times is twilio being called ***!!!')
    const params = {
        roomName: roomName, participantLabel: user.username
    };
    if (!call) {
        const callPromise = device.connect({ params });
        callPromise.then((call) => {
        console.log(' ***what is call', call)
        setCall(call);
        });
    }
    if (!participants.current.includes(user.username)) {
            participants.current.push(user.username);
    }
}, []);

问题分析与解决方案 #

1. 优先解决TwiML过大问题 #

TwiML response body too large是核心触发点之一：

• 你生成的participantLabel传递的是数组的字符串形式（"['emmanuelS21', 'testingUser']"），Twilio的participantLabel只支持单个字符串，不需要传递数组。每个用户的标签应该是各自的用户名，而不是两人的数组。
• 修正方式：后端返回TwiML时，给每个用户的<Conference>标签的participantLabel只设置当前用户的用户名，比如给emmanuelS21的TwiML里participantLabel="emmanuelS21"，给testingUser的设置为participantLabel="testingUser"。

2. 连接错误（53000/31005）的关联修复 #

TwiML格式错误会导致Twilio网关无法正确处理请求，进而触发连接中断和网关挂断错误。修复TwiML后，这两个错误大概率会消失。

3. useEffect重复调用问题 #

空依赖的useEffect被调用四次，可能是组件重复渲染导致的：

• 检查组件是否被多次挂载（比如路由切换、父组件重渲染），可以给组件加React.memo优化。
• 虽然你加了if (!call)判断避免重复发起连接，但重复调用还是可能引发异常，建议在useEffect的依赖数组中加入call和user.username，确保只有当依赖变化时才执行：

useEffect(() => {
    console.log('!!!*** how many times is twilio being called ***!!!')
    const params = {
        roomName: roomName, participantLabel: user.username
    };
    if (!call) {
        const callPromise = device.connect({ params });
        callPromise.then((call) => {
        console.log(' ***what is call', call)
        setCall(call);
        });
    }
    if (!participants.current.includes(user.username)) {
            participants.current.push(user.username);
    }
}, [call, user.username]);

额外检查点 #

• 确认roomName生成逻辑正确，两名用户的会议室名称完全一致（无大小写、空格差异）。
• 检查Twilio设备初始化是否正确，确保device对象在组件挂载时已完成初始化，避免在未就绪时调用connect。

内容的提问来源于stack exchange，提问作者Emm