js脚本与c#如何互相调用

JavaScript脚本与C#的互相调用可以通过多种方式实现，包括通过Web API、使用JavaScript引擎嵌入、通过SignalR技术等。在这篇文章中，我们将详细讨论这些方法，并探讨每种方法的优缺点以及适用场景。

一、通过Web API调用

使用ASP.NET Core创建Web API

在C#中，我们可以使用ASP.NET Core创建Web API，这样JavaScript可以通过HTTP请求来调用C#方法。以下是一个简单的示例：

创建一个新的ASP.NET Core Web API项目：
```
dotnet new webapi -n MyApiProject
```

创建一个控制器来处理HTTP请求：

[Route("api/[controller]")]
[ApiController]
public class MyController : ControllerBase
{
    [HttpGet("getdata")]
    public IActionResult GetData()
    {
        var data = new { Name = "John Doe", Age = 30 };
        return Ok(data);
    }
}

在JavaScript中调用这个API：

fetch('https://localhost:5001/api/mycontroller/getdata')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

通过Web API的方式，JavaScript可以非常方便地调用C#方法并获取数据。这使得前端与后端之间的通信变得非常灵活和高效。由于HTTP是一个标准协议，这种方法也非常适合分布式系统。

二、使用JavaScript引擎嵌入

嵌入JavaScript引擎到C#中

另一种方法是将JavaScript引擎嵌入到C#应用程序中，这样C#可以直接调用JavaScript代码，反之亦然。常用的JavaScript引擎包括Jint和ClearScript。

使用Jint引擎：

var engine = new Jint.Engine();
engine.Execute("function add(a, b) { return a + b; }");
var result = engine.Invoke("add", 1, 2).AsNumber();
Console.WriteLine(result);  // 输出: 3

使用ClearScript引擎：

using Microsoft.ClearScript;
using Microsoft.ClearScript.V8;
var engine = new V8ScriptEngine();
engine.Execute("function multiply(a, b) { return a * b; }");
var result = engine.Script.multiply(3, 4);
Console.WriteLine(result);  // 输出: 12

通过嵌入JavaScript引擎，C#可以直接执行JavaScript代码并与之交互。这种方法特别适用于需要动态执行JavaScript代码的场景，比如在桌面应用程序中提供脚本扩展功能。

三、通过SignalR技术

使用SignalR进行实时通信

SignalR是一种用于在Web应用程序中实现实时双向通信的技术。它可以让JavaScript和C#之间进行实时通信，非常适合需要即时更新数据的应用场景，比如在线聊天应用、实时数据监控等。

在ASP.NET Core项目中添加SignalR：

dotnet add package Microsoft.AspNetCore.SignalR

创建一个Hub来处理客户端的连接和消息：

public class ChatHub : Hub
{
    public async Task SendMessage(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

配置SignalR服务：

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
    // 其他服务配置
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseSignalR(routes =>
    {
        routes.MapHub<ChatHub>("/chathub");
    });
    // 其他中间件配置
}

在JavaScript客户端中连接SignalR：

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.18/signalr.min.js"></script>
<script>
    const connection = new signalR.HubConnectionBuilder()
        .withUrl("/chathub")
        .build();
    connection.on("ReceiveMessage", (user, message) => {
        console.log(user + ": " + message);
    });
    connection.start().catch(err => console.error(err.toString()));
    function sendMessage(user, message) {
        connection.invoke("SendMessage", user, message)
            .catch(err => console.error(err.toString()));
    }
</script>

SignalR提供了一种强大且灵活的方式来实现实时通信。它不仅支持WebSockets，还能自动回退到其他传输协议（如Server-Sent Events和长轮询）以确保兼容性。

四、通过Electron集成

Electron + .NET

Electron是一个用于构建跨平台桌面应用程序的框架。通过Electron，我们可以使用JavaScript、HTML和CSS来构建用户界面，同时在后台使用C#处理业务逻辑。

创建一个新的Electron项目：
```
npx create-electron-app my-app
```

在Electron中集成.NET：

使用Node.js插件如 edge-js 或 electron-edge-js 来调用C#代码。

const edge = require('electron-edge-js');
var helloWorld = edge.func(function () {/*
    async (input) => {
        return ".NET Welcomes " + input.ToString();
    }
*/});
helloWorld('JavaScript', function (error, result) {
    if (error) throw error;
    console.log(result);
});

这种方法使得开发者可以利用JavaScript的灵活性和C#的强大功能来构建复杂的桌面应用程序。特别适用于需要跨平台支持的应用场景。

五、通过Blazor技术

使用Blazor WebAssembly

Blazor是一个用于构建交互式Web用户界面的框架。通过Blazor WebAssembly，C#代码可以直接在浏览器中运行，并与JavaScript进行互操作。

创建一个新的Blazor WebAssembly项目：
```
dotnet new blazorwasm -n MyBlazorApp
```

在Blazor组件中调用JavaScript：

@page "/fetchdata"
@inject IJSRuntime JS
<button @onclick="ShowAlert">Show Alert</button>
@code {
    private async Task ShowAlert()
    {
        await JS.InvokeVoidAsync("alert", "Hello from C#!");
    }
}

在JavaScript中调用C#方法：

<script>
    window.callDotNetMethod = function () {
        DotNet.invokeMethodAsync('MyBlazorApp', 'MyMethod', 'Hello from JavaScript')
            .then(data => {
                console.log(data);
            });
    }
</script>

在C#中定义被调用的方法：

public partial class MyComponent
{
    [JSInvokable]
    public static string MyMethod(string message)
    {
        return "Received message: " + message;
    }
}

Blazor提供了一种无缝的方式来将C#和JavaScript结合在一起，使得开发者可以充分利用两种语言的优势。

六、通过Node.js与C#的互操作

使用Node.js插件调用C#

在一些情况下，我们可能需要在Node.js环境中调用C#代码。这可以通过一些插件来实现，比如edge.js。

安装edge.js：
```
npm install edge-js
```

调用C#代码：

const edge = require('edge-js');
var helloWorld = edge.func(function () {/*
    async (input) => {
        return ".NET Welcomes " + input.ToString();
    }
*/});
helloWorld('Node.js', function (error, result) {
    if (error) throw error;
    console.log(result);  // 输出: .NET Welcomes Node.js
});

通过这种方式，Node.js可以直接调用C#代码，这对于需要在Node.js环境中运行C#逻辑的应用场景非常有用。

七、通过WebSocket进行通信

WebSocket实现实时通信

WebSocket是一种在单个TCP连接上进行全双工通信的协议。通过WebSocket，JavaScript和C#可以实现实时通信。

在ASP.NET Core中实现WebSocket服务：

public class WebSocketMiddleware
{
    private readonly RequestDelegate _next;
    public WebSocketMiddleware(RequestDelegate next)
    {
        _next = next;
    }
    public async Task InvokeAsync(HttpContext context)
    {
        if (context.WebSockets.IsWebSocketRequest)
        {
            WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
            await Echo(context, webSocket);
        }
        else
        {
            await _next(context);
        }
    }
    private async Task Echo(HttpContext context, WebSocket webSocket)
    {
        var buffer = new byte[1024 * 4];
        WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
        while (!result.CloseStatus.HasValue)
        {
            await webSocket.SendAsync(new ArraySegment<byte>(buffer, 0, result.Count), result.MessageType, result.EndOfMessage, CancellationToken.None);
            result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
        }
        await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
    }
}

在JavaScript中连接WebSocket：

const socket = new WebSocket('ws://localhost:5000/ws');
socket.onopen = () => {
    socket.send('Hello from JavaScript');
};
socket.onmessage = (event) => {
    console.log('Message from server:', event.data);
};

通过WebSocket，JavaScript和C#可以实现高效的实时通信，特别适用于需要即时更新数据的应用场景。

八、通过Electron.NET集成

使用Electron.NET开发桌面应用

Electron.NET是一个基于Electron和ASP.NET Core的跨平台桌面应用框架。通过Electron.NET，我们可以使用C#和JavaScript来构建跨平台桌面应用。

创建一个新的Electron.NET项目：

dotnet new mvc -o MyElectronApp
cd MyElectronApp
dotnet add package ElectronNET.API
dotnet add package ElectronNET.CLI

初始化Electron.NET：

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }
    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStartup<Startup>();
                webBuilder.UseElectron(args);
            });
}