Crossbar.io 浏览器端 JavaScript 开发入门指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00992/article/details/148913211

Crossbar.io 浏览器端 JavaScript 开发入门指南

前言

Crossbar.io 是一个开源的 WAMP (Web Application Messaging Protocol) 路由器实现，它为分布式应用提供了实时通信能力。本文将介绍如何在浏览器环境中使用 Crossbar.io 和 AutobahnJS 库构建一个完整的 WAMP 应用。

WAMP 协议简介

WAMP 是一种开放标准协议，它为应用程序提供了两种通信模式：

远程过程调用 (RPC)：允许客户端调用服务器端暴露的方法
发布/订阅 (PubSub)：允许客户端订阅主题并接收相关事件

这两种模式都建立在 WebSocket 连接之上，提供了全双工的实时通信能力。

环境准备

浏览器要求

Chrome、Firefox、IE10+、Safari 或 Opera 等现代浏览器
支持 WebSocket 协议

开发工具

文本编辑器
浏览器开发者工具（用于查看控制台输出）

创建应用

使用 Crossbar.io 命令行工具初始化一个新项目：

crossbar init --template hello:browser --appdir ~/hello

这个命令会创建一个名为 "hello" 的目录，其中包含：

配置文件 .crossbar/config.json
前端页面 web/frontend.html
后端页面 web/backend.html
主页 web/index.html

项目结构解析

生成的模板项目包含以下关键文件：

config.json：Crossbar.io 的配置文件
- 定义了 WAMP 路由器配置
- 设置了 Web 服务器端口
- 配置了默认的 realm (realm1)
frontend.html：前端组件
- 实现了 WAMP 客户端功能
- 包含订阅、发布、注册和调用远程方法的示例代码
backend.html：后端组件
- 同样实现了完整的 WAMP 功能
- 与前端的代码形成对称结构

启动应用

在项目目录下运行：

crossbar start

启动后，Crossbar.io 会：

启动 WAMP 路由器
启动 Web 服务器（默认端口 8080）
加载配置中定义的路由规则和权限

代码解析

前端核心代码

// 创建 WAMP 连接
var connection = new autobahn.Connection({
   url: "ws://localhost:8080/ws",
   realm: "realm1"
});

// 连接建立后的回调
connection.onopen = function (session, details) {
   // 1. 订阅主题
   session.subscribe('com.example.oncounter', function(args) {
      console.log("收到计数器事件:", args[0]);
   });
   
   // 2. 发布事件
   setInterval(function() {
      session.publish('com.example.onhello', ['来自浏览器的问候']);
   }, 1000);
   
   // 3. 注册远程过程
   session.register('com.example.mul2', function(args) {
      return args[0] * args[1];
   });
   
   // 4. 调用远程过程
   setInterval(function() {
      session.call('com.example.add2', [x, 18]).then(
         function(res) { console.log("加法结果:", res); }
      );
      x += 3;
   }, 1000);
};

后端核心代码

connection.onopen = function (session, details) {
   // 1. 订阅主题（与前端发布的事件对应）
   session.subscribe('com.example.onhello', function(args) {
      console.log("收到问候:", args[0]);
   });
   
   // 2. 注册远程过程（前端会调用）
   session.register('com.example.add2', function(args) {
      return args[0] + args[1];
   });
   
   // 3. 发布事件
   // 4. 调用远程过程
   setInterval(function() {
      session.publish('com.example.oncounter', [counter]);
      session.call('com.example.mul2', [counter, 3]);
      counter++;
   }, 1000);
};