1

注入されたサービスを呼び出して JavaScript で Web ソケットを呼び出してデータを取得する blazor サーバー アプリがあります。Web ソケットがデータをサービスの ac# インスタンス コールバックに返すようにします。c# コールバックは、javascript メソッドからは正常に機能しますが、websocket コールバック (onmessge、onerror、onclose など) からは正常に機能しません。エラーはありません。データがありません。

インスタンスをグローバル javascript にしようとしましたが、呼び出し元のクラスで静的な値を作成しようとしましたが、まだ機能しません。私は最後までグーグルで検索し、すべての提案を試しましたが、まだ運がありません.

ここにインデックスページがあります：

@page "/"
@inject BlazorJavaScriptCallback.IService1 _service1

<h1>Hello, world!</h1>

<p>And the answer back from the web service is @Message</p>

@code {

    protected string Message  {get; set;}

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            Message = await _service1.CallWebService();
            StateHasChanged();
        }
    }
}

サービス：

using Microsoft.JSInterop;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;

namespace BlazorJavaScriptCallback
{
    public interface IService1
    {
        Task<string> CallWebService();
    }


    public class Service1 : IService1
    {

        AutoResetEvent _stopWaitHandle = new AutoResetEvent(false);
        String _message;

        private IJSRuntime _jsruntime;

        public Service1(IJSRuntime jsruntime)
        {
            _jsruntime = jsruntime;
        }

        public async Task<string> CallWebService()
        {
            _message = string.Empty;
            var dotNetObjRef = DotNetObjectReference.Create(this);
            await _jsruntime.InvokeVoidAsync("callWebService", dotNetObjRef, "OutputMessage");
            _stopWaitHandle.WaitOne();

            return _message;
        }

        [JSInvokable]
        public async Task OutputMessage(string message)
        {
            _message = message;
            Console.WriteLine($"**** OutputMessage {message}");
            _stopWaitHandle.Set();
        }

    }
}

ジャバスクリプト：

async function callWebService(instance, method) {

    instance.invokeMethodAsync(method, "start");

    var wsUri = "wss://127.0.0.1:80/Test/";
    var websocket = new WebSocket(wsUri);
    console.log("websocket has been setup");

    websocket.onopen = function (e) {
        console.log("websocket connected");  
        websocket.send("Hellow world")
    };

    websocket.onclose = function (e) {
        instance.invokeMethodAsync(method, "closed");
        console.log("websocket closed");
    };

    websocket.onmessage = function (e) {
        console.log("websocket got message" + e.data);
        instance.invokeMethodAsync(method, e.data);
        websocket.close();
    };

    websocket.onerror = function (e) {
        console.log("websocket error");
        instance.invokeMethodAsync(method, "error");
        websocket.close();
    };

}

これを ConfigureServices のスタートアップに追加する必要があります。

services.AddScoped<IService1, Service1>();

_Hosts.cshtml に次を追加する必要があります。

<script src="~/scripts/Javascript.js"></script>

編集:挿入されたサービスなしでこれを試すと機能します(呼び出しとコールバックをかみそりのページに配置します)。うーん。

4

1 に答える 1

0

Blazor の[JSInvokable]タグを使用して、JS WebSocket コールバック関数 onMessage(e) で .net のメソッドを呼び出します。問題を解決できる

例えば：

JSファイル

var url = "ws://127.0.0.1:1234";
var websocket;
var connected = false;

/**
 * init webSocket
 * @param callback
 * @param value
 * @constructor
 */
function ConnectServer(callback, value) {

    if ('WebSocket' in window) {
        websocket = new WebSocket(url);
    } else if (window.WebSocket) {
        websocket = new WebSocket(url);
    } else if ('MozWebSocket' in window) {
        websocket = new MozWebSocket(url);
    } else {
        alert("The browser version is too low! Please use Chrome, Firefox, IE10+ browsers!");
    }

    websocket.onopen = function () {
        connected = true;
        callback(value);
    }
    websocket.onclose = function (e) {
        connected = false;
    }
    websocket.onmessage = function (e) {
        onMessage(e);
    }
    websocket.onerror = function (e) {
        alert("The websocket server is not connected, please make sure the server is running!")
    };

}

function onMessage(e) {
    var json = JSON.stringify(e.data);
    // call .net method
    DotNet.invokeMethodAsync('BlazorServerSample', 'CallBackMethod', json);
}

/**
 * A shared method for sending information to the server
 * @param jsonStr
 */
function sendMessage(jsonStr) {
    connected ? websocket.send(jsonStr) : alert("websocket server is disconnected or not running")
}


function callWebSocket(data){
    var json = JSON.stringify(data)
    connected ? sendMessage(json ) : ConnectServer(sendMessage, json)
}

BlazorPage

@code{
    @inject IJSRuntime JSRuntime

    public static string? jsonStr { get; set; }
    [JSInvokable]
    public static Task<int> produceMessage(string json)
    {
        jsonStr = json;
        return Task.FromResult(1);
    }
    
    public async Task CallWebSocket()
    {
        jsonStr = "";
        // mock request data
        data = "{'position': 3,'has_more_items': true,'items_html': 'Car'}";
        await JSRuntime.InvokeVoidAsync("callWebSocket", data);
        
        bool t = true;
        int sec = 0;
        do
        {
            await Task.Delay(1000);
            sec++;
            if (!string.IsNullOrEmpty(jsonStr) || sec > 10)
            {
                t= false;
            }
        } while (t);

        // your business
    }

}

私の答えがあなたに役立つことを願っています

于 2022-03-02T13:10:11.127 に答える