如何结合Web客户端使用Voximplant文本聊天并实现双用户对话

一、控制面板配置步骤 #

• 创建应用：登录Voximplant控制面板，新建一个应用（比如命名为ChatApp）
• 添加用户：在应用的「Users」标签下，创建两个测试用户（如user1、user2）并设置登录密码
• 配置路由规则：进入「Routing」标签，新建一条路由规则，匹配所有会话请求，关联到一个空场景（文本聊天无需媒体处理，场景仅做基础消息转发逻辑）
• 编写场景逻辑：在「Scenarios」标签下新建场景，写入消息转发代码：

VoxEngine.addEventListener(AppEvents.CallAlerting, (e) => {
  const call = e.call;
  call.answer();
  // 监听消息接收并转发给对话另一端
  call.addEventListener(CallEvents.MessageReceived, (msgEvent) => {
    const peerCall = call.getPeerCall();
    if (peerCall) {
      peerCall.sendMessage(msgEvent.text);
    }
  });
});

• 关联用户与应用：在用户详情页确认两个测试用户已绑定到创建的聊天应用

二、Web客户端代码实现 #

1. 引入SDK #

在HTML页面中引入Voximplant官方SDK：

<script src="https://cdn.voximplant.com/js/voximplant.min.js"></script>

2. 核心聊天逻辑 #

const voxInstance = Voximplant.getInstance();
let activeCall = null;

// 用户登录
async function loginUser(username, password) {
  try {
    await voxInstance.init();
    await voxInstance.login(username, password);
    console.log('登录成功');
  } catch (error) {
    console.error('登录失败:', error);
  }
}

// 发起聊天对话
async function initiateChat(targetUsername) {
  activeCall = await voxInstance.call(targetUsername, {
    audio: false,
    video: false
  });

  // 监听消息接收
  activeCall.on(Voximplant.CallEvents.MessageReceived, (event) => {
    renderMessage(event.text, 'received');
  });

  // 监听连接建立
  activeCall.on(Voximplant.CallEvents.Connected, () => {
    console.log('聊天连接已建立');
  });
}

// 发送消息
function sendChatMessage(text) {
  if (activeCall && activeCall.state() === Voximplant.CallState.Connected) {
    activeCall.sendMessage(text);
    renderMessage(text, 'sent');
  }
}

// 渲染消息到页面
function renderMessage(text, type) {
  const chatBox = document.getElementById('chat-box');
  const messageEl = document.createElement('div');
  messageEl.className = `chat-message ${type}`;
  messageEl.textContent = text;
  chatBox.appendChild(messageEl);
}

3. 页面交互示例 #

<div id="chat-box" style="height: 300px; border: 1px solid #ccc; padding: 10px; overflow-y: auto;"></div>
<input type="text" id="msg-input" placeholder="输入消息..." style="width: 80%;">
<button onclick="sendChatMessage(document.getElementById('msg-input').value)">发送</button>

<script>
// 示例：user1登录后发起与user2的聊天
loginUser('user1@ChatApp.voximplant.com', 'user1-pass').then(() => {
  initiateChat('user2@ChatApp.voximplant.com');
});
</script>

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