Javascript 中的 WebScoket 连接失败

小能豆

Javascript 中的 WebScoket 连接失败

javascript

我有一个小型集成项目，我有一个 cpp 代码，它只是将数据发送到 html 网页，现在我想使用套接字在通信中实现这一点

这是 html 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket Communication Example</title>
</head>
<body>
    <h1></h1>
    <div id="data"></div>

    <script>
        console.log("Inside Script tag");

        var socket = new WebSocket("wss://192.168.1.23:8080");

        socket.onopen = function(event) {
            console.log("WebSocket connected.");
        };
        console.log("Socket : ", socket);

        socket.onmessage = function(event) {
            document.getElementById("data").innerHTML = event.data;
        };
    </script>
</body>
</html>

这个cpp代码

#include <iostream>
#include <cstring>
#include <cstdlib>
#include <unistd.h>
#include <sys/socket.h>
#include <netinet/in.h>

#define PORT 8080

int main()
{
    int server_fd, new_socket, valread;
    struct sockaddr_in address;
    int opt = 1;
    int addrlen = sizeof(address);
    char buffer[1024] = {0};
    const char *message = "HTTP/1.1 200 OK\nContent-Type: text/html\n\n<html><body><h1>Hello from C++ Server</h1></body></html>";

    // Creating socket file descriptor
    if ((server_fd = socket(AF_INET, SOCK_STREAM, 0)) == 0)
    {
        perror("socket failed");
        exit(EXIT_FAILURE);
    }

    // Forcefully attaching socket to the port 8080
    if (setsockopt(server_fd, SOL_SOCKET, SO_REUSEADDR | SO_REUSEPORT, &opt, sizeof(opt)))
    {
        perror("setsockopt");
        exit(EXIT_FAILURE);
    }
    address.sin_family = AF_INET;
    address.sin_addr.s_addr = INADDR_ANY;
    address.sin_port = htons(PORT);

    // Forcefully attaching socket to the port 8080
    if (bind(server_fd, (struct sockaddr *)&address, sizeof(address)) < 0)
    {
        perror("bind failed");
        exit(EXIT_FAILURE);
    }
    if (listen(server_fd, 3) < 0)
    {
        perror("listen");
        exit(EXIT_FAILURE);
    }
    if ((new_socket = accept(server_fd, (struct sockaddr *)&address, (socklen_t *)&addrlen)) < 0)
    {
        perror("accept");
        exit(EXIT_FAILURE);
    }
    valread = read(new_socket, buffer, 1024);
    printf("%s\n", buffer);
    send(new_socket, message, strlen(message), 0);
    printf("Hello message sent\n");
    return 0;
}

当我运行它时，它在浏览器控制台上给出此错误

(index):14 WebSocket connection to 'wss://192.168.1.23:8080/' failed:

我已经尝试过 127.0.0.1 或“localhost”，但没有任何效果我还检查了防火墙是否有端口 8080 阻塞，但它仍然给出此错误

阅读 172

2024-02-28

共1个答案

小能豆

您的问题可能是由于尝试使用不安全的 WebSocket 连接（ws://）连接到安全的站点（https://）而引起的。在您的 HTML 页面中，您正在尝试使用 wss:// 协议连接到 WebSocket，这意味着您期望使用安全的 WebSocket 连接。但是，在您的 C++ 代码中，您只是创建了一个普通的 TCP 套接字，而不是 WebSocket 服务器。

要解决这个问题，您需要在 C 代码中实现一个 WebSocket 服务器，而不是一个简单的 TCP 服务器。由于 C 并没有内置的 WebSocket 库，您可能需要使用第三方库来实现 WebSocket 服务器。一些流行的选择包括 Boost.Beast、WebSocket++ 和 uWebSockets 等。

以下是一个使用 Boost.Beast 的简单示例，用于在 C++ 中创建一个 WebSocket 服务器：

#include <boost/beast/core.hpp>
#include <boost/beast/websocket.hpp>
#include <boost/asio/ip/tcp.hpp>
#include <iostream>

namespace beast = boost::beast;
namespace http = beast::http;
namespace websocket = beast::websocket;
namespace net = boost::asio;

int main() {
    net::io_context ioc;
    net::ip::tcp::acceptor acceptor(ioc, {net::ip::tcp::v4(), 8080});

    while (true) {
        net::ip::tcp::socket socket(ioc);
        acceptor.accept(socket);

        try {
            websocket::stream<net::ip::tcp::socket> ws(std::move(socket));
            ws.accept();

            // 发送消息给客户端
            ws.text(true);
            ws.write(net::buffer("Hello from C++ WebSocket Server"));
        } catch (const beast::system_error& e) {
            std::cerr << "Error: " << e.what() << std::endl;
        }
    }

    return 0;
}

请注意，此示例仅提供了最基本的 WebSocket 服务器功能。您可能需要根据您的需求进行修改和扩展。另外，请确保在运行此代码之前安装了 Boost 库。

然后，您可以在 HTML 页面中使用 ws:// 协议连接到您的 WebSocket 服务器，而不再遇到安全性错误。

2024-02-28