JS调用Java方法|极客笔记

JS调用Java方法

在Web开发中，我们经常会遇到前端和后端交互的场景，而在某些情况下，我们可能需要在前端JavaScript中调用后端Java方法。本文将详细介绍如何实现在JavaScript中调用Java方法的方法。

一、使用Java Applet

Java Applet是一种能够在网页中运行的Java小程序，可以通过JavaScript与Applet进行交互，从而实现调用Java方法的功能。下面是一个简单的示例：

// HelloApplet.java
import java.applet.Applet;
import java.awt.Graphics;

public class HelloApplet extends Applet {
    public void paint(Graphics g) {
        g.drawString("Hello from Java!", 20, 20);
    }

    public String sayHello(String name) {
        return "Hello, " + name + "!";
    }
}

上面是一个简单的Java Applet程序，其中包含了一个绘制”Hello from Java!”的方法paint和一个返回问候语的方法sayHello。

<!-- index.html -->
<applet code="HelloApplet.class" width="200" height="200" id="appletId" archive="HelloApplet.jar"></applet>

<script>
    var applet = document.getElementById("appletId");
    var message = applet.sayHello("Alice");
    console.log(message);
</script>

在HTML文件中，先通过<applet>标签将Java Applet引入到页面中，然后使用JavaScript通过Applet的id来调用sayHello方法，并输出。

二、使用WebAssembly

WebAssembly（简称Wasm）是一种可以在Web浏览器中运行的低级字节码格式，可以用来将其他语言（如C、C++、Rust）编译成WebAssembly模块。通过WebAssembly，我们可以实现JavaScript与其他语言的交互。

在这里我们以C语言为例，演示如何将C语言编译为WebAssembly模块，并在JavaScript中调用其中的方法。

// hello.c
#include <stdio.h>
#include <emscripten/emscripten.h>

EMSCRIPTEN_KEEPALIVE
char* sayHello(char* name) {
    static char greeting[100];
    sprintf(greeting, "Hello, %s!", name);
    return greeting;
}

以上是一个简单的C语言程序，包含一个用于生成问候语的方法sayHello。

emcc hello.c -s EXPORTED_FUNCTIONS="['_sayHello']" -o hello.js

上述命令将hello.c文件编译成hello.js文件，其中EXPORTED_FUNCTIONS用于指定要导出的方法。

<!-- index.html -->
<script>
    var Module = {
        onRuntimeInitialized: function() {
            var sayHello = Module.cwrap('sayHello', 'string', ['string']);
            var message = sayHello("Bob");
            console.log(message);
        }
    };
    var script = document.createElement('script');
    script.src = 'hello.js';
    document.body.appendChild(script);
</script>

在HTML文件中，我们通过Module.cwrap方法来定义调用C方法的JavaScript函数，并通过script标签引入编译后的Wasm模块。

三、使用Websocket

除了传统的Applet和WebAssembly方法外，我们还可以通过Websocket来实现JavaScript与Java方法的调用。Websocket是一种在浏览器和服务器之间进行全双工通信的技术，可以实现实时的数据交换。

下面是一个简单的示例：

// WebSocketServer.java
import java.io.IOException;
import java.net.ServerSocket;
import java.net.Socket;
import java.io.InputStream;
import java.io.OutputStream;

public class WebSocketServer {
    public static void main(String[] args) throws IOException {
        ServerSocket server = new ServerSocket(8080);
        System.out.println("WebSocket server started.");
        Socket client = server.accept();
        System.out.println("Client connected.");

        InputStream in = client.getInputStream();
        OutputStream out = client.getOutputStream();

        byte[] buffer = new byte[1024];
        int len = in.read(buffer);
        String message = new String(buffer, 0, len);
        System.out.println("Received message: " + message);

        String response = "Hello, " + message + "!";
        out.write(response.getBytes());
        out.flush();

        client.close();
        server.close();
    }
}

上面是一个简单的Java WebSocket服务器程序，当有客户端连接时，会返回一个问候语。

<!-- index.html -->
<input type="text" id="nameInput">
<button onclick="sendWebSocketMessage()">Say Hello</button>
<script>
    var socket = new WebSocket('ws://localhost:8080');
    socket.onopen = function() {
        console.log('WebSocket connected.');
    };
    socket.onmessage = function(event) {
        console.log('Received: ' + event.data);
    };

    function sendWebSocketMessage() {
        var name = document.getElementById('nameInput').value;
        socket.send(name);
    }
</script>

在HTML文件中，我们通过WebSocket与Java服务器建立连接，并通过输入框和按钮来触发消息的发送，实现与Java后端的交互。