我可以使用SignalR JS库接收来自SignalR Hub的消息,但不能使用WebSocket。

huangapple go评论96阅读模式
英文:

I can receive messages from signalR hub with signalR js librayr, but not with WebSocket

问题

我尝试实现一种连接客户端到SignalR Hub的方式。
因为我想将其添加到使用rollup构建的库中(而它不是用rollup构建的),所以我不能只使用SignalR库。

对于测试,我有一个线程每10秒向所有客户端发送一条消息:

Thread cyclicThread = ThreadUtils.GetCyclicThread(10000, () =>
{
    this.NotificationHub.Clients.All.SendAsync("methodeTestBis", 239);
});
cyclicThread.Start();

使用SignalR库时,它可以工作,我可以在Chrome的调试器网络选项卡中看到消息。

// 使用SignalR js库进行的测试,可以接收消息
const connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

connection.start();

网络选项卡,可以看到SignalR消息

但是当我使用WebSocket来处理来自SignalR Hub的消息时,它不起作用。
onopen函数被触发,但onmessage函数不会触发,并且我在网络选项卡中看不到与此WebSocket相关的消息。

// 使用WebSocket进行的测试,无法接收消息
let url = "https://localhost:7143/chatHub";

const headers = {};
const [name, value] = getUserAgentHeader();
headers[name] = value;

fetch(`${url}/negotiate?negotiateVersion=1`, {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        headers,
    },
    body: JSON.stringify({
        content: "",
        headers: headers,
        timeout: 100000,
        withCredentials: true,
    }),
}).then((response) => response.json())
    .then((response) => {
        // 这里的fetch返回一些关于SignalR连接的信息,以及用于身份验证的令牌
        console.log(response);

        // SignalR连接的Web套接字
        const wsUrl = `${url}?id=${response.connectionToken}`.replace(/^http/, "ws");
        const webSocket = new WebSocket(wsUrl);

        webSocket.onopen = (event) => {
            // 它会触发
            console.log(event);
        }

        webSocket.onmessage = (message) => {
            // 它不会触发
            console.log(message);
        }

        webSocket.onerror = (event) => {
            console.log(event);
            console.log(event.error);
        }

        webSocket.onclose = (event) => {
            console.log(event);
        }
});

// 下面两个函数是来自SignalR的,用于测试和调试问题是什么
function getUserAgentHeader() {
    let userAgentHeaderName = "X-SignalR-User-Agent";

    return [userAgentHeaderName, constructUserAgent("7.0.5", undefined, "Browser", undefined)];
}
function constructUserAgent(version, os, runtime, runtimeVersion) {
    // Microsoft SignalR/[Version] ([Detailed Version]; [Operating System]; [Runtime]; [Runtime Version])
    let userAgent = "Microsoft SignalR/";
    const majorAndMinor = version.split(".");
    userAgent += `${majorAndMinor[0]}.${majorAndMinor[1]}`;
    userAgent += ` (${version}; `;
    if (os && os !== "") {
        userAgent += `${os}; `;
    }
    else {
        userAgent += "Unknown OS; ";
    }
    userAgent += `${runtime}`;
    if (runtimeVersion) {
        userAgent += `; ${runtimeVersion}`;
    }
    else {
        userAgent += "; Unknown Runtime Version";
    }
    userAgent += ")";
    return userAgent;
}

无法看到WebSocket消息的网络选项卡

有人知道我做错了什么吗?

这是获取SignalR库的链接:
https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js

我用于创建自己的WebSocket代码的代码位于第2251到2342行之间。

英文:

I try to implement a way to connect client to a signalR hub.
And I can't just take the SignalR library, because I want add this into library builded with rollup (And it's don't build with rollup)

For the tests, I have a Thread send a message to all clients every 10s :

    Thread cyclicThread = ThreadUtils.GetCyclicThread(10000, () =>
    {
        this.NotificationHub.Clients.All.SendAsync("methodeTestBis", 239);
    });
    cyclicThread.Start();

With signalR library, it's work, I can see messages in the network tab of Chrome's debugger.

    // Tests with signalR js library, messages receiving
    const connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

    connection.start();

Network tab where we can see messages with signalR

But when I use WebSocket to handle messages come from the signalR hub, it's not work.
The onopen function is triggered, but not the onmessage function, and I didn't see messages for this WebSocket inside the network tab.

// Tests with WebSocket, messages not receiving
    let url = "https://localhost:7143/chatHub";

    const headers = {};
    const [name, value] = getUserAgentHeader();
    headers[name] = value;

    fetch(`${url}/negotiate?negotiateVersion=1`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            headers,
        },
        body: JSON.stringify({
            content: "",
            headers: headers,
            timeout: 100000,
            withCredentials: true,
        }),
    }).then((response) => response.json())
        .then((response) => {
            // The fetch return here some information about signalR connection, and the token for idendification
            console.log(response);

            // The web socket for SignalR's connection
            const wsUrl = `${url}?id=${response.connectionToken}`.replace(/^http/, "ws");
            const webSocket = new WebSocket(wsUrl);

            webSocket.onopen = (event) => {
                // It's triggered
                console.log(event);
            }

            webSocket.onmessage = (message) => {
                // It's not triggered
                console.log(message);
            }

            webSocket.onerror = (event) => {
                console.log(event);
                console.log(event.error);
            }

            webSocket.onclose = (event) => {
                console.log(event);
            }
    });

    // The next two functions is from signalR, used for tests and debug what's wrong
    function getUserAgentHeader() {
        let userAgentHeaderName = "X-SignalR-User-Agent";

        return [userAgentHeaderName, constructUserAgent("7.0.5", undefined, "Browser", undefined)];
    }
    function constructUserAgent(version, os, runtime, runtimeVersion) {
        // Microsoft SignalR/[Version] ([Detailed Version]; [Operating System]; [Runtime]; [Runtime Version])
        let userAgent = "Microsoft SignalR/";
        const majorAndMinor = version.split(".");
        userAgent += `${majorAndMinor[0]}.${majorAndMinor[1]}`;
        userAgent += ` (${version}; `;
        if (os && os !== "") {
            userAgent += `${os}; `;
        }
        else {
            userAgent += "Unknown OS; ";
        }
        userAgent += `${runtime}`;
        if (runtimeVersion) {
            userAgent += `; ${runtimeVersion}`;
        }
        else {
            userAgent += "; Unknown Runtime Version";
        }
        userAgent += ")";
        return userAgent;
    }

Network tab where we can't see messages with WebSocket

Someone know what I do wrong ?

There is the link to get the signalR library :
https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js

The code I use for make my own WebSocket's code is between lines 2251 and 2342

答案1

得分: 1

我找到了另一种修复我的问题的方法。

之前,在我的React库中,我使用以下导入信号R的方式:

    import signalR, { HubConnection } from "@microsoft/signalr";

现在,我使用以下导入方式,在我的库中使用npm run rollup可以正常工作:

    import * as signalR from "@microsoft/signalr";

我不再遇到错误消息:"default is not exported by @microsoft/signalr"。

英文:

I find another way to correct my issue.

Previously, in my react lirbary, I use the next line for import signalR :

    import signalR, { HubConnection } from "@microsoft/signalr";

And now, I use the follow import, and it's work with npm run rollup in my library :

    import * as signalR from "@microsoft/signalr";

And I don't have the error "default is not exported by @microsoft/signalr"

huangapple
  • 本文由 发表于 2023年6月16日 02:32:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/76484567.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定