WebSocket client

This commit is contained in:
crusader 2017-07-04 20:07:48 +09:00
parent ed49b5ecdf
commit 85784461f8
2 changed files with 173 additions and 112 deletions

View File

@ -0,0 +1,56 @@
import { Channel, eventChannel, SagaIterator } from 'redux-saga';
import { call, Effect, fork, put, takeEvery } from 'redux-saga/effects';
function connect(): Promise<WebSocket> {
return new Promise<WebSocket>(resolve => {
const socket = new WebSocket('ws://localhost:3000');
socket.onopen = ((evt: Event): void => {
resolve(socket);
});
socket.onclose = ((evt: Event): void => {
console.log('');
});
socket.onmessage = ((evt: MessageEvent): void => {
console.log('');
});
socket.onerror = ((evt: MessageEvent): void => {
console.log('');
});
});
}
function subscribe(socket: WebSocket): Channel<string> {
return eventChannel<string>(emitter => {
socket.onmessage = ((evt: MessageEvent): void => {
emitter(evt.data);
});
return function unsubscribe(): void {
console.log('');
};
});
}
function* read(socket: WebSocket): SagaIterator {
const channel = yield call(subscribe, socket);
let action = yield takeEvery(channel, (action: A) => any);
while (true) {
let action = yield take(channel);
yield put(action);
}
}
function* write(socket: WebSocket): SagaIterator {
while (true) {
const { payload } = yield take(`${sendMessage}`);
socket.emit('message', payload);
}
}
function* flow(): SagaIterator {
const socket = yield call(connect);
}

View File

@ -14,115 +14,120 @@ const routes = (
export default routes; export default routes;
const _routes = [ // const _routes = [
{ // {
path: '/signin', // path: '/signin',
component: Signin, // exact: true,
}, // component: Signin,
{ // },
path: '/signup', // {
component: Signup, // path: '/signup',
}, // exact: true,
{ // component: Signup,
path: '/forgot_password', // },
component: ForgotPassword, // {
}, // path: '/forgot_password',
{ // exact: true,
path: '/email_confirm', // component: ForgotPassword,
component: EmailConfirm, // },
}, // {
{ // path: '/email_confirm',
path: '/', // exact: true,
component: Home, // component: EmailConfirm,
routes: [ // },
{ // {
path: '/monitoring', // path: '/',
component: Monitoring, // exact: true,
routes: [ // component: Home,
{ // routes: [
path: '/probe', // {
component: Probe, // path: '/monitoring',
routes: [ // component: Monitoring,
{ // routes: [
path: '/list', // {
component: Probe, // path: '/probe',
}, // component: Probe,
{ // routes: [
path: '/noauth', // {
component: NoAuthProbe, // path: '/list',
}, // component: Probe,
{ // },
path: '/setup', // {
component: ProbeSetup, // path: '/noauth',
}, // component: NoAuthProbe,
], // },
}, // {
{ // path: '/setup',
path: '/sensor', // component: ProbeSetup,
component: Sensor, // },
}, // ],
], // },
}, // {
{ // path: '/sensor',
path: '/infrastructure', // component: Sensor,
component: , // },
routes: [ // ],
{ // },
path: '/maps', // {
component: InfrastructureMaps, // path: '/infrastructure',
}, // component: ,
{ // routes: [
path: '/targets', // {
component: Targets, // path: '/maps',
}, // component: InfrastructureMaps,
], // },
}, // {
{ // path: '/targets',
path: '/dashboard', // component: Targets,
component: Dashboard, // },
}, // ],
{ // },
path: '/metrics', // {
component: Metrics, // path: '/dashboard',
}, // component: Dashboard,
{ // },
path: '/alerts', // {
component: Alerts, // path: '/metrics',
}, // component: Metrics,
{ // },
path: '/history', // {
component: History, // path: '/alerts',
}, // component: Alerts,
{ // },
path: '/settings', // {
component: Settings, // path: '/history',
}, // component: History,
{ // },
path: '/notifications', // {
component: Notifications, // path: '/settings',
}, // component: Settings,
{ // },
path: '/account', // {
component: , // path: '/notifications',
routes: [ // component: Notifications,
{ // },
path: '/signout', // {
component: Signout, // path: '/account',
}, // component: ,
{ // routes: [
path: '/profile', // {
component: Profile, // path: '/signout',
}, // component: Signout,
{ // },
path: '/preferences', // {
component: Preferences, // path: '/profile',
}, // component: Profile,
{ // },
path: '/help', // {
component: Help, // path: '/preferences',
}, // component: Preferences,
], // },
}, // {
], // path: '/help',
}, // component: Help,
]; // },
// ],
// },
// ],
// },
// ];