如何通过WebSocket连接Memgraph并使用Orb可视化图结果及嵌入自有站点？

一、配置Memgraph开启WebSocket服务 #

Memgraph默认启用WebSocket接口，端口通常为7687（与Bolt端口共用，协议会自动适配）。如需自定义配置：

• 找到Memgraph配置文件（通常在/etc/memgraph/memgraph.conf或容器挂载目录）
• 确保--bolt-port或--websocket-port配置项未被注释，设置合适端口（建议保持默认7687）
• 重启Memgraph服务使配置生效

二、集成Orb可视化工具 #

Orb是Memgraph官方的图可视化组件，可直接引入自有站点：

1. 引入Orb依赖
   在HTML页面中添加资源：

<script src="https://unpkg.com/@memgraph/orb@latest/dist/orb.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@memgraph/orb@latest/dist/orb.min.css">

2. 初始化Orb并建立WebSocket连接
   添加页面容器与JavaScript代码：

<div id="orb-container" style="width: 100%; height: 800px;"></div>

<script>
  // 初始化Orb实例
  const orb = new Orb(document.getElementById('orb-container'));

  // 连接Memgraph的WebSocket服务
  const ws = new WebSocket('ws://你的Memgraph地址:7687');

  ws.onopen = () => {
    console.log('WebSocket连接已建立');
    // 发送Cypher查询
    ws.send(JSON.stringify({
      type: 'query',
      query: 'MATCH (n) RETURN n LIMIT 100;'
    }));
  };

  ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    // 将查询结果传入Orb渲染
    if (data.type === 'result') {
      orb.render(data.result);
    }
  };

  ws.onerror = (error) => {
    console.error('WebSocket连接错误:', error);
  };

  ws.onclose = () => {
    console.log('WebSocket连接已关闭');
  };
</script>

3. 自定义可视化样式
   通过配置项调整布局、节点样式：

const orb = new Orb(document.getElementById('orb-container'), {
  layout: {
    type: 'forceDirected',
    options: {
      linkDistance: 200,
      charge: -800
    }
  },
  nodeStyle: {
    color: (node) => node.labels.includes('User') ? '#4299e1' : '#f6ad55',
    size: 25
  }
});

三、部署到自有站点注意事项 #

• 跨域处理：若站点与Memgraph不在同一域名，需在Memgraph配置中添加CORS规则，修改配置文件：

  --bolt-server-cors-origin="https://你的站点域名"
  

  生产环境避免使用*作为允许源，仅指定可信域名，修改后重启Memgraph。
• 安全配置：确保Memgraph访问权限配置正确，禁止未授权的数据库访问；若使用Docker部署，启动时映射端口并传递配置参数：

  docker run -p 7687:7687 memgraph/memgraph --bolt-server-cors-origin="https://你的站点域名"
  

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