Hermes Agent WebSocket接入：为网页和App添加AI对话能力（2026最新）-China AI Hub

OpenClaw 企业定制私人订制工作流优化运维 openclaw记忆优化问题咨询解决请加微信交流

微信: aixbwz

想给网站或App接入AI对话能力？WebSocket是最实时的通信方式，Hermes Agent支持WebSocket接入，可以为网页或移动应用提供实时AI对话能力。这篇讲清楚WebSocket接入的配置、使用方法、以及实际示例。

WebSocket是什么

WebSocket是一种双向实时通信协议，相比HTTP轮询延迟更低、更省资源。适合需要AI实时回复的场景：

网页聊天Widget
实时客服系统
在线教育平台
游戏内AI助手

服务端配置

# config.yaml
websocket:
  enabled: true
  host: "0.0.0.0"
  port: 3001
  path: "/ws"
  auth_required: true
  max_connections: 100

启动WebSocket服务

hermes websocket

或者通过Gateway启用

hermes gateway --ws

客户端连接

const ws = new WebSocket("wss://your-domain.com/ws");

ws.onopen = () => {
  console.log("Connected to Hermes");
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log("Received:", data);
};

ws.send(JSON.stringify({
  type: "message",
  content: "Hello, Hermes!",
  session_id: "user-123"
}));

消息格式

发送消息

{
  "type": "message",
  "content": "用户输入的文字",
  "session_id": "可选，用于多会话"
}

接收消息

{
  "type": "response",
  "content": "AI的回复",
  "done": true
}

{
  "type": "stream",
  "content": "逐字增量"
}

流式响应

// 服务端配置开启流式
websocket:
  stream: true

// 客户端接收
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === "stream") {
    appendText(data.content); // 逐字显示
  } else if (data.type === "response") {
    finalize(); // 完成
  }
};

认证方式

Token认证

websocket:
  auth_required: true
  token_header: "Authorization"
  token_prefix: "Bearer"

const token = "your-jwt-token";
const ws = new WebSocket("wss://your-domain.com/ws", {
  headers: { "Authorization": `Bearer ${token}` }
});

API Key认证

websocket:
  auth_required: true

const ws = new WebSocket("wss://your-domain.com/ws?api_key=sk-xxx");

前端集成示例

基础聊天组件

<div id="chat-container">
  <div id="messages"></div>
  <input type="text" id="input" placeholder="输入消息...">
  <button onclick="send()">发送</button>
</div>

<script>
const ws = new WebSocket("wss://your-domain.com/ws");
const messages = document.getElementById("messages");

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === "stream") {
    appendMessage("assistant", data.content);
  } else if (data.type === "response") {
    finalizeMessage();
  }
};

function send() {
  const input = document.getElementById("input");
  ws.send(JSON.stringify({
    type: "message",
    content: input.value
  }));
  appendMessage("user", input.value);
  input.value = "";
}

function appendMessage(role, content) {
  const div = document.createElement("div");
  div.className = `message ${role}`;
  div.textContent = content;
  messages.appendChild(div);
}

function appendText(text) {
  const last = messages.lastChild;
  if (last) last.textContent += text;
}
</script>

React集成

import { useEffect, useRef, useState } from "react";

function ChatWidget() {
  const [messages, setMessages] = useState([]);
  const wsRef = useRef();

  useEffect(() => {
    const ws = new WebSocket("wss://your-domain.com/ws");
    wsRef.current = ws;

    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.type === "stream") {
        setMessages(prev => [{
          ...prev[prev.length-1],
          content: prev[prev.length-1].content + data.content
        }]);
      } else if (data.type === "response") {
        setMessages(prev => [...prev, { role: "assistant", content: "" }]);
      }
    };

    return () => ws.close();
  }, []);

  const send = (content) => {
    wsRef.current.send(JSON.stringify({ type: "message", content }));
    setMessages(prev => [...prev, { role: "user", content }]);
  };

  return (
    <div>
      {messages.map((m, i) => (
        <div key={i} className={m.role}>{m.content}</div>
      ))}
      <input onEnter={() => send(e.target.value)} />
    </div>
  );
}

后端代理配置

Nginx WebSocket代理

server {
    listen 443 ssl;
    server_name your-domain.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    location /ws {
        proxy_pass http://localhost:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_read_timeout 86400;
    }
}

安全配置

websocket:
  auth_required: true
  allowed_origins:
    - "https://your-domain.com"
    - "https://app.your-domain.com"
  rate_limit:
    max_messages_per_minute: 60
  max_message_length: 10000

常见问题

连接被拒绝？

检查：1）WebSocket是否启用；2）Nginx proxy_set_header是否配置；3）防火墙是否开放端口。

消息延迟高？

检查：1）网络延迟；2）模型响应速度；3）是否开启流式传输。

如何处理断线？

ws.onclose = () => {
  console.log("Disconnected, reconnecting...");
  setTimeout(() => connect(), 3000);
};

总结

WebSocket让Hermes接入任何网页或应用：

实时双向通信
支持流式输出
JWT/API Key认证
前端集成简单

适合需要AI对话能力的Web和移动应用。

文章版权归作者所有，未经允许请勿转载。

THE END

Hermes Agent WebSocket接入：为网页和App添加AI对话能力（2026最新）