UWP で Socket.IO を利用してメッセージを受信する

Socket.IO を利用してデータを配信している機器などから、C# を利用して、値を受信するためには、SocketIoClientDotNet が便利です。サンプルを短くするためコードビハインドに書いていますが、実際は MVVM してください。

手順

1. UWP プロジェクトの作成と参照の追加

Windows > Universal > Blank App からプロジェクトを作成し、プロジェクトの 参照 > NuGet パッケージの管理 > 参照 で SocketIoClientDotNet を検索してインストールします。

2. UI の変更

MainPage.xaml を下記のように書き換えます。2行目の x:Class="App1.MainPage" は適宜作成したプロジェクト名に合わせて変更してください。

MainPage.xaml

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="ReceivedText" FontSize="30" >---</TextBlock>
    </Grid>
</Page>

ここでは、ReceivedText という名前の TextBlock を作成しました。

3. コードビハインドの更新

MainPage.xaml.cs を下記のように書き換えます。IPアドレス等は適宜書き換えてください。

MainPage.xaml.cs

using Quobject.SocketIoClientDotNet.Client;
using System;
using Windows.UI.Core;
using Windows.UI.Xaml.Controls;

namespace App1
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            SetSocket();
            ReceivedText.Text = "接続を待っています";
        }

        private void SetSocket()
        {
            var socket = IO.Socket("http://192.168.1.3:3000");

            // 接続時のイベント
            socket.On(Socket.EVENT_CONNECT, async () =>
            {
                // UIとは別スレッドなので Dispatcher を利用する
                await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
                {
                    ReceivedText.Text = "接続しました";
                });
            });

            // "msg" 受信時
            socket.On("msg", async (data) =>
            {
                // UIとは別スレッドなので Dispatcher を利用する
                await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
                {
                    ReceivedText.Text = Convert.ToString(data);
                });
            });
        }
    }
}

4. Package.appxmanifest の更新

プライベートネットワーク上でサーバとのやり取りが必要な場合は、Package.appxmanifest を開き、Private Networks (Client & Server) にチェックを入れます。このチェックをしないとプライベートネットワークではデータを送受信できません。

5. 接続の確認

ビルドを行いアプリケーションを実行します。あらかじめ Socket.IO のサーバを起動しておいてください。