Node.js
C#
Socket.io
UWP

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

More than 1 year has passed since last update.

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 のサーバを起動しておいてください。