BrowserInterop을 사용하여 Blazor로 사용자 GPS 좌표를 얻는 방법은 무엇입니까?

이미 말했지만 Blazor는 awesome 입니다. 하지만 단점이 생겼습니다. 이러한 단점 중 하나는 WebAssembly에 의존한다는 사실에서 비롯됩니다. WebAssembly는 Geolocation API 과 같은 브라우저 API를 제공하지 않습니다. 사용자의 GPS 좌표를 얻으려면(물론 사용자의 승인이 있어야 함) Geolocation API를 호출할 수 있도록 JSinterop을 사용해야 합니다. 이러한 메서드를 통합하는 것은 지루할 수 있기 때문에 많은 브라우저 API에 대한 JSInterop 호출을 구현하는 BrowserInterop이라는 패키지를 만들었습니다. 구현된 메서드를 보려면 repoWIKI를 볼 수 있습니다.

이 블로그 게시물에서는 이 라이브러리를 사용하여 사용자의 지리적 위치를 파악하고 사용자가 이동할 때를 아는 방법을 설명합니다.

설정

먼저 Blazor WASM 프로젝트를 만듭니다(이는 Blazor 서버 측에서도 작동함). 프로젝트 폴더에서 다음을 입력합니다.

dotnet new blazorwasm

그런 다음 BrowserInterop 라이브러리를 참조하십시오.

dotnet add package BrowserInterop --version 1.1.1

그런 다음 index.html에서 필요한 js 코드에 대한 참조를 추가합니다(webassembly.js 태그 뒤).

 <script src="_content/BrowserInterop/scripts.js"></script>

모든 블로그 게시물 소스 코드here를 찾을 수 있습니다.

현재 위치 가져오기

이제 페이지 중 하나에서 현재 IJSRuntime이 필요합니다.

@inject IJSRuntime jsRuntime

필요한 메서드를 제공하는 BrowserInterop 네임스페이스에 대한 참조를 추가합니다.

@using BrowserInterop.Extensions
@using BrowserInterop.Geolocation

이제 Geolocation API 래퍼를 가져옵니다.

@code{
    private WindowNavigatorGeolocation geolocationWrapper;
    private GeolocationResult currentPosition;
    private List positioHistory = new List();
    protected override async Task OnInitializedAsync(){
        var window = await jsRuntime.Window();
        var navigator = await window.Navigator();
        geolocationWrapper = navigator.Geolocation;
    }
}

참고: 성능 향상을 위해 Program.cs 파일에서도 수행할 수 있습니다. 모든 페이지 로드에 대해 이 작업을 수행하는 것은 의미가 없습니다.

이제 이것을 사용하여 현재 위치를 얻을 수 있습니다.

<button type="button" @onclick="GetGeolocation">Get Current Position</button>

@if(currentPosition != null){

Current position : 
        <ul>

Latitude : @currentPosition.Coords.Latitude
            <li>Longitude : @currentPosition.Coords.Longitude </li>
            <li>Altitude : @currentPosition.Coords.Altitude </li>
            <li>Accuracy : @currentPosition.Coords.Accuracy </li>
            <li>Altitude Accuracy : @currentPosition.Coords.AltitudeAccuracy </li>
            <li>Heading : @currentPosition.Coords.Heading </li>
            <li>Speed : @currentPosition.Coords.Speed </li>
        </ul>
    </div>
}
//...
@code{
    //...
    public async Task GetGeolocation()
    {
        currentPosition = (await geolocationWrapper.GetCurrentPosition(new PositionOptions()
        {
            EnableHighAccuracy = true,
            MaximumAgeTimeSpan = TimeSpan.FromHours(1),
            TimeoutTimeSpan = TimeSpan.FromMinutes(1)
        })).Location;
    }
    //...
}

처음인 경우 브라우저는 사용자에게 권한을 요청하고 사용자가 권한을 부여하면 메서드가 반환됩니다.

사용자가 거부하면 Location이 null이 되고 Error 속성에서 세부 정보를 얻을 수 있습니다.

모든 옵션과 반환 결과는 브라우저 API에서 가져온 것이며 JSInterop 배관 외에는 마법이 없습니다.

위치 변경 관찰

브라우저는 또한 모바일 사용자를 위해 GPS 위치 변경을 관찰하기 위한 API를 제공합니다. BrowserInterop을 사용하여 Blazor 앱에서 이러한 변경 사항을 볼 수 있습니다.

WatchPosition">Watch position
//...
@code{
    //...
    private List positioHistory = new List();

    private IAsyncDisposable geopositionWatcher;

    public async Task WatchPosition(){
        geopositionWatcher = await geolocationWrapper.WatchPosition(async (p) =>
        {
            positioHistory.Add(p.Location);
            StateHasChanged();
        }
        );
    }
    //...
}

WatchPosition이 IAsyncDisposable을 반환합니다. 나중에 그 역할을 살펴보겠습니다

.

콜백에 있으므로 StateHasChanged를 호출해야 합니다(StateHasChanged는 각 UI 이벤트 핸들러가 끝날 때 자동으로 호출됨).

콜백은 ValueTask를 반환하거나 비동기식이어야 합니다. 여기서 await가 없기 때문에 async는 빌드 경고를 트리거합니다. Task를 반환하는 목적은 이 콜백 내에서 비동기 코드를 실행하려는 경우 수행할 수 있습니다.

이제 감시자를 삭제하기 위한 코드를 추가해야 합니다. 그렇지 않으면 구성 요소가 GC에 의해 삭제되지 않고 사용자가 다른 페이지로 이동한 후에도 코드가 계속 호출됩니다.

먼저 razor 파일 상단에 @implements 절을 추가합니다.

@implements IAsyncDisposable

그런 다음 감시자를 중지하고 폐기하기 위한 버튼을 추가할 수 있습니다.

<button type="button" @onclick="StopWatch">Stop watch</button>
//...
@code{
    //...
    public async Task StopWatch(){
        await geopositionWatcher.DisposeAsync();
        geopositionWatcher = null;
    }

    public async ValueTask DisposeAsync(){
        await StopWatch();
    }
    //...
}

버튼은 필수는 아니지만 DisposeAsync는 구성 요소가 파괴될 때 Blazor가 이를 호출합니다. 이것은 C#(또는 내가 아는 다른 언어)에서 수신하는 모든 이벤트와 마찬가지로 필수입니다. 이것은 매우 중요합니다. 잊지 마세요!!

전체 소스 코드는 여기에서 볼 수 있습니다: https://github.com/RemiBou/remibou.github.io/tree/master/projects/RemiBou.BlogPost.Gps

결론

이 블로그 게시물에서 JS 한 줄도 작성하지 않고 사용자 GPS 좌표를 얻는 방법을 살펴보았습니다. 나는 누구나 JS에 대해 몰라도 브라우저에서 .NET으로 작업할 수 있도록 이 라이브러리를 작성했습니다. 주저하지 말고 프로젝트 GitHub 페이지에서 피드백을 보내거나 더 많은 API를 요청하세요. https://github.com/RemiBou/BrowserInterop