composer require weswecan/nativephp-mobile-osc
 
php artisan native:plugin:register weswecan/nativephp-mobile-osc

php artisan vendor:publish --tag=nativephp-plugins-provider

Weswecan\MobileOsc\MobileOscServiceProvider::class

{
    "imports": {
        "#mobile-osc": {
            "types": "./vendor/weswecan/nativephp-mobile-osc/resources/js/dist/index.d.ts",
            "default": "./vendor/weswecan/nativephp-mobile-osc/resources/js/dist/index.js"
        }
    }
}

import { mobileOsc, OscEvent, OscErrorCode, OscArgumentType } from '#mobile-osc';
 
const addresses = await mobileOsc.getLocalAddresses();
console.log('Local OSC targets:', addresses);
 
// Start a foreground listener on UDP port 9000.
await mobileOsc.startListening(9000, {
    id: 'main',
    label: 'Main OSC input',
});
 
// Receive messages.
const cleanupMessage = mobileOsc.on(OscEvent.MessageReceived, (message) => {
    console.log(message.address, message.arguments);
});
 
// Send a message with inferred int, float, and string arguments.
await mobileOsc.send('192.168.1.50', 9001, '/cue/go', [1, 0.75, 'stage-left']);
 
// Send a typed blob argument as base64.
await mobileOsc.send('192.168.1.50', 9001, '/asset/blob', [
    { type: OscArgumentType.Blob, value: btoa('payload') },
]);
 
// Listen for errors.
const cleanupError = mobileOsc.on(OscEvent.Error, (error) => {
    if (error.code === OscErrorCode.ListenerFailed) {
        console.error('Listener failed:', error.message);
    }
});
 
// Clean up listeners when your component unmounts.
cleanupMessage();
cleanupError();
await mobileOsc.stopListening('main');

use Weswecan\MobileOsc\Facades\MobileOsc;
 
$status = MobileOsc::getStatus();
$addresses = MobileOsc::getLocalAddresses();
 
MobileOsc::startListening(9000, [
    'id' => 'main',
    'label' => 'Main OSC input',
]);
 
MobileOsc::send('192.168.1.50', 9001, '/cue/go', [1, 0.75, 'stage-left']);

android.permission.INTERNET

const status = await mobileOsc.getStatus();
 
console.log(status.initialized);
console.log(status.backgroundMode); // "best_effort"
console.log(status.listeners);

const addresses = await mobileOsc.getLocalAddresses();
 
addresses.forEach((address) => {
    console.log(address.address, address.interface, address.isLoopback);
});

await mobileOsc.startListening(9000, {
    id: 'main',
    address: '0.0.0.0',
    label: 'Main input',
    background: true,
});

MobileOsc::startListening(9000, [
    'id' => 'main',
    'address' => '0.0.0.0',
    'label' => 'Main input',
    'background' => true,
]);

await mobileOsc.stopListening('main');

await mobileOsc.stopAllListeners();

await mobileOsc.send('192.168.1.50', 9001, '/lighting/intensity', [
    7,
    0.8,
    'front',
]);

await mobileOsc.send('192.168.1.50', 9001, '/blob', [
    { type: 'blob', value: btoa('binary-ish payload') },
]);

MobileOsc::send('192.168.1.50', 9001, '/lighting/intensity', [
    7,
    0.8,
    'front',
]);
 
MobileOsc::send('192.168.1.50', 9001, '/blob', [
    ['type' => 'blob', 'value' => base64_encode('binary-ish payload')],
]);

await mobileOsc.sendBundle('192.168.1.50', 9001, [
    { address: '/cue/prepare', arguments: [12] },
    { address: '/cue/go', arguments: ['now'] },
], {
    timetag: 1,
});

MobileOsc::sendBundle('192.168.1.50', 9001, [
    ['address' => '/cue/prepare', 'arguments' => [12]],
    ['address' => '/cue/go', 'arguments' => ['now']],
], [
    'timetag' => 1,
]);

const args = mobileOsc.normalizeArguments([1, 0.5, 'go']);
// [
//   { type: 'int', value: 1 },
//   { type: 'float', value: 0.5 },
//   { type: 'string', value: 'go' }
// ]

import { mobileOsc, OscEvent } from '#mobile-osc';
 
const cleanup = mobileOsc.on(OscEvent.MessageReceived, (payload) => {
    console.log(payload.listenerId, payload.address, payload.arguments);
});
 
// Later:
cleanup();

use Native\Mobile\Attributes\OnNative;
use Weswecan\MobileOsc\Events\OscMessageReceived;
 
#[OnNative(OscMessageReceived::class)]
public function handleOscMessage(
    string $listenerId,
    string $remoteHost,
    int $remotePort,
    string $address,
    array $arguments,
    string $receivedAt,
): void {
    // Handle the OSC message.
}

<script setup lang="ts">
import { onUnmounted, ref } from 'vue';
import {
    mobileOsc,
    OscEvent,
    type OscMessageReceivedPayload,
    type OscErrorPayload,
} from '#mobile-osc';
 
const isListening = ref(false);
const lastMessage = ref<OscMessageReceivedPayload | null>(null);
const error = ref<string | null>(null);
 
const cleanupMessage = mobileOsc.on(OscEvent.MessageReceived, (payload) => {
    lastMessage.value = payload;
});
 
const cleanupError = mobileOsc.on(OscEvent.Error, (payload: OscErrorPayload) => {
    error.value = `${payload.code}: ${payload.message}`;
    isListening.value = false;
});
 
onUnmounted(() => {
    cleanupMessage();
    cleanupError();
    mobileOsc.stopListening('main');
});
 
async function start() {
    error.value = null;
    await mobileOsc.startListening(9000, { id: 'main', label: 'Main input' });
    isListening.value = true;
}
 
async function stop() {
    await mobileOsc.stopListening('main');
    isListening.value = false;
}
 
async function sendGo() {
    await mobileOsc.send('192.168.1.50', 9001, '/cue/go', [1]);
}
</script>
 
<template>
    <div>
        <button :disabled="isListening" @click="start">
            Start OSC
        </button>
        <button :disabled="!isListening" @click="stop">
            Stop OSC
        </button>
        <button @click="sendGo">
            Send Go
        </button>
 
        <div v-if="lastMessage">
            <p>Address: {{ lastMessage.address }}</p>
            <p>From: {{ lastMessage.remoteHost }}:{{ lastMessage.remotePort }}</p>
        </div>
 
        <p v-if="error" style="color: red;">{{ error }}</p>
    </div>
</template>

import { useCallback, useEffect, useState } from 'react';
import { mobileOsc, OscEvent, type OscMessageReceivedPayload } from '#mobile-osc';
 
export default function OscPanel() {
    const [isListening, setIsListening] = useState(false);
    const [lastMessage, setLastMessage] = useState<OscMessageReceivedPayload | null>(null);
    const [error, setError] = useState<string | null>(null);
 
    useEffect(() => {
        const cleanupMessage = mobileOsc.on(OscEvent.MessageReceived, setLastMessage);
        const cleanupError = mobileOsc.on(OscEvent.Error, (payload) => {
            setError(`${payload.code}: ${payload.message}`);
            setIsListening(false);
        });
 
        return () => {
            cleanupMessage();
            cleanupError();
            mobileOsc.stopListening('main');
        };
    }, []);
 
    const start = useCallback(async () => {
        setError(null);
        await mobileOsc.startListening(9000, { id: 'main', label: 'Main input' });
        setIsListening(true);
    }, []);
 
    const stop = useCallback(async () => {
        await mobileOsc.stopListening('main');
        setIsListening(false);
    }, []);
 
    return (
        <div>
            <button onClick={start} disabled={isListening}>Start OSC</button>
            <button onClick={stop} disabled={!isListening}>Stop OSC</button>
            <button onClick={() => mobileOsc.send('192.168.1.50', 9001, '/cue/go', [1])}>
                Send Go
            </button>
 
            {lastMessage && (
                <p>{lastMessage.address} from {lastMessage.remoteHost}:{lastMessage.remotePort}</p>
            )}
 
            {error && <p style={{ color: 'red' }}>{error}</p>}
        </div>
    );
}

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
use Native\Mobile\Attributes\OnNative;
use Weswecan\MobileOsc\Events\OscError;
use Weswecan\MobileOsc\Events\OscListenerStarted;
use Weswecan\MobileOsc\Events\OscListenerStopped;
use Weswecan\MobileOsc\Events\OscMessageReceived;
use Weswecan\MobileOsc\Facades\MobileOsc;
 
class OscPanel extends Component
{
    public bool $isListening = false;
    public ?string $lastAddress = null;
    public ?string $lastSender = null;
    public ?string $error = null;
 
    public function start(): void
    {
        $this->error = null;
 
        MobileOsc::startListening(9000, [
            'id' => 'main',
            'label' => 'Main input',
        ]);
    }
 
    public function stop(): void
    {
        MobileOsc::stopListening('main');
    }
 
    public function sendGo(): void
    {
        MobileOsc::send('192.168.1.50', 9001, '/cue/go', [1]);
    }
 
    #[OnNative(OscListenerStarted::class)]
    public function handleStarted(string $listenerId, int $port, string $address, string $status): void
    {
        $this->isListening = true;
    }
 
    #[OnNative(OscListenerStopped::class)]
    public function handleStopped(string $listenerId, string $reason = 'stopped'): void
    {
        $this->isListening = false;
    }
 
    #[OnNative(OscMessageReceived::class)]
    public function handleMessage(
        string $listenerId,
        string $remoteHost,
        int $remotePort,
        string $address,
        array $arguments,
        string $receivedAt,
    ): void {
        $this->lastAddress = $address;
        $this->lastSender = "{$remoteHost}:{$remotePort}";
    }
 
    #[OnNative(OscError::class)]
    public function handleError(string $operation, string $code, string $message, ?string $listenerId = null): void
    {
        $this->error = "{$code}: {$message}";
        $this->isListening = false;
    }
 
    public function render()
    {
        return view('livewire.osc-panel');
    }
}

<div>
    <button wire:click="start" @disabled($isListening)>
        Start OSC
    </button>
 
    <button wire:click="stop" @disabled(! $isListening)>
        Stop OSC
    </button>
 
    <button wire:click="sendGo">
        Send Go
    </button>
 
    @if ($lastAddress)
        <p>Last message: {{ $lastAddress }} from {{ $lastSender }}</p>
    @endif
 
    @if ($error)
        <p style="color: red;">{{ $error }}</p>
    @endif
</div>

yarn install
yarn build
composer test