企业官网建设流程全解析

WebSharper Remoting实战指南：如何用一个Remote标注实现零样板的异步调用

【免费下载链接】coreWebSharper - Full-stack, functional, reactive web apps and microservices in F# and C#项目地址: https://gitcode.com/gh_mirrors/core113/core

WebSharper是一个用于构建全栈（Full-stack）、函数式、响应式 Web 应用的 .NET 框架，支持 F# 和 C#。它的Remoting机制堪称"零样板远程调用"的典范：你只需在服务端函数上加一个<Remote>标注，浏览器端就能像调用本地函数一样发起异步请求——序列化、HTTP 传输、CSRF 防护、响应反序列化，全部由框架自动完成 🚀

什么是 WebSharper Remoting？

传统做法中，实现一次"前端调后端"通常需要：手写 REST 接口、前端定义 API 封装、手动 JSON 序列化/反序列化、处理跨域与 CSRF……这些样板代码在 WebSharper 中一行都不用写。

Remoting 的工作原理非常直接：

简单说：一次标注，双端共享类型安全的异步通信。

快速上手：三步完成远程调用

1️⃣ 在服务端函数上加标注

在 F# 中，给任意函数加上<Remote>特性即可（标注可带自定义路径，方便区分同名函数）：

module Server = [<Remote>] let f4 (x: int) = async { return x + 1 }

C# 中使用[Remote]特性，用法完全对等（参考 Remoting.cs 中的 C# 示例）。

2️⃣ 注册实例级处理器（按需）

模块级函数直接可用；若远程方法是类或接口的成员，则需通过AddRpcHandler注册实现实例，或在 AspNetCore 中用AddRemotingHandler（见src/sitelets/WebSharper.AspNetCore/Services.fs）。

3️⃣ 在浏览器端直接调用

let! result = Server.f4 8 // 浏览器中执行 → 返回 9

客户端默认通过AjaxRemotingProvider发起 XHR 请求，支持Sync、Async、Task、Send四种模式（定义于src/stdlib/WebSharper.StdLib/Remoting.fs）。

5 种进阶玩法，解锁更多可能

💡 以下能力在测试项目tests/WebSharper.Web.Tests/Remoting.fs中均有真实用例：

1. 自定义路由路径：<Remote "Server/f3Alternate">避免同名方法冲突
2. 接口级远程代理：Remote<Server.Handler>.M3 40直接调用抽象成员
3. 记录类型作为远程函数包：把多个<Remote>函数装入记录，统一Remote<MyRecord>.R1 ...
4. 用户会话集成：远程函数内可调用Web.Remoting.GetContext()登录/登出/获取当前用户
5. 自定义传输层：用<RemotingProvider>标注替换默认 Provider，轻松接入 gRPC 或日志中间件

可传输的数据类型几乎覆盖 .NET 日常类型：元组、联合类型、记录、Map/Set、DateTime、枚举、匿名记录、结构体，甚至 F# 的Async计算表达式返回值都会被自动适配。

源码解读：一个标注背后发生了什么？

🔍 核心实现分布在三个模块，值得新手重点阅读：

• 特性定义：RemoteAttribute标记可远程调用的服务端函数（src/compiler/WebSharper.Core/Attributes.fs）；编译器据此在元数据中登记远程方法，并阻止这些代码被编译进客户端
• 服务端引擎：WebSharper.Core.Remoting模块中的Server类型负责路径匹配、参数 JSON 解码、方法反射调用与结果编码，Async/Task返回值由适配器自动展开（src/compiler/WebSharper.Core/Remoting.fs）
• Web 安全层：RpcHandler在每次请求前执行 CORS 与 CSRF Token 校验（src/sitelets/WebSharper.Web/RpcModule.fs）；客户端的默认 XHR 实现会自动附带x-csrftoken请求头（src/stdlib/WebSharper.StdLib/Remoting.fs）

请求链路示意：

浏览器 Server.f4 8 → JSON 编码 [8] → XHR POST（附 CSRF 头） → 服务端路由匹配 + 校验 → 反射调用 → JSON 编码结果 → 浏览器自动解码 → let! x = 9 ✅

如何验证你的远程调用？

项目自带了完整的 Remoting 测试套件（tests/WebSharper.Web.Tests/Remoting.fs），覆盖unit→unit、int→Async<int>、记录、集合、登录登出等 40 余种场景。建议新手直接跑通它：

git clone https://gitcode.com/gh_mirrors/core113/core # 进入仓库后执行 node runtests.js

测试基于 QUnit 在浏览器中运行（如文首截图所示），远程调用测试会真实地经过"浏览器 → 服务器 → 浏览器"全链路，结果一目了然。

小结

一句话总结：WebSharper Remoting 把"异步客户端-服务器调用"变成了"本地函数调用"的书写体验，这正是它作为 F#/C# 全栈框架的核心竞争力之一。上手只需三步，进阶空间却在源码中等你探索 ✨

【免费下载链接】coreWebSharper - Full-stack, functional, reactive web apps and microservices in F# and C#项目地址: https://gitcode.com/gh_mirrors/core113/core