在网页上运行C++代码的秘诀

terry 2年前 (2023-10-01) 阅读数 188 #c++

文章标签 Linux

一、选择合适的在线编译器

在网页上运行C++代码，首先需要找到一个合适的在线编译器。当前比较流行的在线编译器有Online GDB、Tutorials Point等。这些在线编译器通常提供了一个代码编辑器、控制台界面和用于编译和运行C++代码的功能。

#include <iostream>
using namespace std;
int main() {
    cout << "Hello World!";
    return 0;
}

二、通过JavaScript运行C++代码

除了使用在线编译器，还可以通过JavaScript在网页上直接运行C++代码。在这种方法中，先将C++代码编译为JavaScript，然后在网页上使用JavaScript引擎运行代码。这种方法需要使用特定的工具或库，如Emscripten和WebAssembly。以下是一个使用Emscripten将C++代码编译为JavaScript的示例：

#include <iostream>
using namespace std;
int main() {
    cout << "Hello World!";
    return 0;
}

使用Emscripten将上述代码编译为JavaScript：

emcc hello.cpp -o hello.js

三、使用WebSocket实时运行C++代码

WebSocket是一种在单个TCP连接上提供的双向通信协议，用于通过网页向服务器发送或接收数据。通过WebSocket，可以在网页上实时运行C++代码。这种方法需要在服务器端搭建WebSocket服务器，并在网页上使用JavaScript连接到服务器。以下是一个使用WebSocket实时运行C++代码的示例：

// 服务器端代码
#include <websocketpp/config/asio_no_tls.hpp>
#include <websocketpp/server.hpp>
#include <fstream>
#include <streambuf>

using namespace std;

string readFile(string filename) {
    ifstream t(filename);
    string str((istreambuf_iterator<char>(t)), istreambuf_iterator<char>());
    return str;
}

string runCpp(string code) {
    ofstream outfile("temp.cpp");
    outfile << code;
    outfile.close();
    system("g++ temp.cpp -o temp.out");
    stringstream out;
    system("./temp.out > temp.txt");
    ifstream infile("temp.txt");
    out << infile.rdbuf();
    infile.close();
    return out.str();
}

int main() {
    websocketpp::server<websocketpp::config::asio> server;
    server.set_message_handler([&server](websocketpp::connection_hdl hdl, 
        websocketpp::server<websocketpp::config::asio>::message_ptr msg) {
        string code = msg->get_payload();
        string result = runCpp(code);
        server.send(hdl, result, msg->get_opcode());
    });
    server.init_asio();
    server.listen(9002);
    server.start_accept();
    server.run();
    return 0;
}

// 客户端代码
<!DOCTYPE html>
<html>
    <head>
        <title>WebSocket Run C++ Code</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
    </head>
    <body>
        <textarea id="code">#include <iostream>
using namespace std;
int main() {
    cout << "Hello World!";
    return 0;
}
</textarea>
        <br>
        <button onclick="runCode()">Run</button>
        <br>
        <pre id="output"></pre>
        <script>
            var socket = io.connect('ws://localhost:9002');
            function runCode() {
                var code = $('#code').val();
                socket.emit('message', code);
                socket.on('message', function(message) {
                    $('#output').html(message);
                });
            }
        </script>
    </body>
</html>