英文:
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();
但是当我使用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;
}
有人知道我做错了什么吗?
这是获取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"
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论