2018-11-23 23:06:28 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
2018-11-26 00:01:18 +00:00
|
|
|
<title>WebSockets Dashboard</title>
|
2018-11-26 07:51:59 +00:00
|
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"
|
|
|
|
|
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
2018-11-23 23:06:28 +00:00
|
|
|
<script
|
|
|
|
|
src="https://code.jquery.com/jquery-3.3.1.min.js"
|
|
|
|
|
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
|
|
|
|
crossorigin="anonymous"></script>
|
2018-11-25 21:24:31 +00:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
|
2018-11-23 23:06:28 +00:00
|
|
|
<script src="https://js.pusher.com/4.3/pusher.min.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2018-11-25 21:24:31 +00:00
|
|
|
<div class="container" id="app">
|
2018-11-26 21:55:49 +00:00
|
|
|
<div class="card col-xs-12 mt-4">
|
2018-11-25 21:24:31 +00:00
|
|
|
<div class="card-header">
|
2018-11-23 23:06:28 +00:00
|
|
|
<form id="connect" class="form-inline" role="form">
|
2018-12-01 13:17:32 +00:00
|
|
|
<label class="my-1 mr-2" for="app">app:</label>
|
|
|
|
|
<select class="form-control form-control-sm mr-2" name="app" id="app" v-model="app">
|
|
|
|
|
<option v-for="app in apps" :value="app">@{{ app.name }}</option>
|
2018-11-25 21:24:31 +00:00
|
|
|
</select>
|
2018-12-01 13:17:32 +00:00
|
|
|
<label class="my-1 mr-2" for="app">Port:</label>
|
2018-11-25 21:24:31 +00:00
|
|
|
<input class="form-control form-control-sm mr-2" v-model="port" placeholder="Port">
|
2018-11-26 07:51:59 +00:00
|
|
|
<button v-if="! connected" type="submit" @click.prevent="connect" class="mr-2 btn btn-sm btn-primary">
|
|
|
|
|
Connect
|
|
|
|
|
</button>
|
|
|
|
|
<button v-if="connected" type="submit" @click.prevent="disconnect" class="btn btn-sm btn-danger">
|
|
|
|
|
Disconnect
|
|
|
|
|
</button>
|
2018-11-23 23:06:28 +00:00
|
|
|
</form>
|
2018-11-25 21:24:31 +00:00
|
|
|
<div id="status"></div>
|
2018-11-23 23:06:28 +00:00
|
|
|
</div>
|
2018-11-25 21:24:31 +00:00
|
|
|
<div class="card-body">
|
|
|
|
|
<div v-if="connected">
|
|
|
|
|
<h4>Event Creator</h4>
|
|
|
|
|
<form>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<input type="text" class="form-control" v-model="form.channel" placeholder="Channel">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col">
|
|
|
|
|
<input type="text" class="form-control" v-model="form.event" placeholder="Event">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row mt-3">
|
|
|
|
|
<div class="col">
|
|
|
|
|
<div class="form-group">
|
2018-11-26 07:51:59 +00:00
|
|
|
<textarea placeholder="Data" v-model="form.data" class="form-control" id="data"
|
|
|
|
|
rows="3"></textarea>
|
2018-11-25 21:24:31 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row text-right">
|
|
|
|
|
<div class="col">
|
2018-11-26 07:51:59 +00:00
|
|
|
<button type="submit" @click.prevent="sendEvent" class="btn btn-sm btn-primary">Send event
|
|
|
|
|
</button>
|
2018-11-25 21:24:31 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
<h4>Events</h4>
|
2018-11-23 23:06:28 +00:00
|
|
|
<table id="events" class="table table-striped table-hover">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Type</th>
|
|
|
|
|
<th>Socket</th>
|
|
|
|
|
<th>Details</th>
|
|
|
|
|
<th>Time</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
2018-11-26 07:51:59 +00:00
|
|
|
<tr v-for="log in logs.slice().reverse()">
|
|
|
|
|
<td><span class="badge" :class="getBadgeClass(log)">@{{ log.type }}</span></td>
|
|
|
|
|
<td>@{{ log.socketId }}</td>
|
|
|
|
|
<td>@{{ log.details }}</td>
|
|
|
|
|
<td>@{{ log.time }}</td>
|
|
|
|
|
</tr>
|
2018-11-23 23:06:28 +00:00
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
2018-11-25 21:24:31 +00:00
|
|
|
new Vue({
|
|
|
|
|
el: '#app',
|
|
|
|
|
|
|
|
|
|
data: {
|
|
|
|
|
connected: false,
|
|
|
|
|
pusher: null,
|
|
|
|
|
port: 6001,
|
2018-12-01 13:17:32 +00:00
|
|
|
app: null,
|
|
|
|
|
apps: {!! json_encode($apps) !!},
|
2018-11-25 21:24:31 +00:00
|
|
|
form: {
|
|
|
|
|
channel: null,
|
|
|
|
|
event: null,
|
|
|
|
|
data: null
|
|
|
|
|
},
|
|
|
|
|
logs: [],
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
connect() {
|
2018-12-01 13:17:32 +00:00
|
|
|
this.pusher = new Pusher(this.app.appKey, {
|
2018-11-25 21:24:31 +00:00
|
|
|
wsHost: window.location.hostname,
|
|
|
|
|
wsPort: this.port,
|
2018-11-26 22:06:16 +00:00
|
|
|
disableStats: true,
|
2018-11-27 11:13:24 +00:00
|
|
|
authEndpoint: '/{{ request()->path() }}/auth',
|
2018-11-26 22:06:16 +00:00
|
|
|
auth: {
|
|
|
|
|
headers: {
|
|
|
|
|
'X-CSRF-Token': "{{ csrf_token() }}"
|
|
|
|
|
}
|
|
|
|
|
},
|
2018-11-25 21:24:31 +00:00
|
|
|
enabledTransports: ['ws', 'flash']
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.pusher.connection.bind('state_change', states => {
|
|
|
|
|
$('div#status').text("Channels current state is " + states.current);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.pusher.connection.bind('connected', () => {
|
|
|
|
|
this.connected = true;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.pusher.connection.bind('disconnected', () => {
|
2018-11-26 07:51:59 +00:00
|
|
|
this.connected = false;
|
|
|
|
|
this.logs = [];
|
2018-11-25 21:24:31 +00:00
|
|
|
});
|
|
|
|
|
|
2018-11-26 07:51:59 +00:00
|
|
|
this.subscribeToAllChannels();
|
2018-11-25 21:24:31 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
disconnect() {
|
|
|
|
|
this.pusher.disconnect();
|
|
|
|
|
},
|
|
|
|
|
|
2018-11-26 07:51:59 +00:00
|
|
|
subscribeToAllChannels() {
|
|
|
|
|
[
|
|
|
|
|
'disconnection',
|
|
|
|
|
'connection',
|
|
|
|
|
'vacated',
|
|
|
|
|
'occupied',
|
|
|
|
|
'subscribed',
|
|
|
|
|
'client-message',
|
|
|
|
|
'api-message',
|
|
|
|
|
].forEach(channelName => this.subscribeToChannel(channelName))
|
|
|
|
|
},
|
|
|
|
|
|
2018-11-25 21:24:31 +00:00
|
|
|
subscribeToChannel(channel) {
|
2018-11-26 07:51:59 +00:00
|
|
|
this.pusher.subscribe('{{ \BeyondCode\LaravelWebSockets\LaravelEcho\Pusher\Dashboard::LOG_CHANNEL_PREFIX }}' + channel)
|
2018-11-25 23:49:36 +00:00
|
|
|
.bind('log-message', (data) => {
|
2018-11-26 07:51:59 +00:00
|
|
|
this.logs.push(data);
|
|
|
|
|
});
|
2018-11-25 21:24:31 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getBadgeClass(log) {
|
|
|
|
|
if (log.type === 'occupied' || log.type === 'connection') {
|
|
|
|
|
return 'badge-primary';
|
|
|
|
|
}
|
|
|
|
|
if (log.type === 'vacated') {
|
|
|
|
|
return 'badge-warning';
|
|
|
|
|
}
|
|
|
|
|
if (log.type === 'disconnection') {
|
|
|
|
|
return 'badge-error';
|
|
|
|
|
}
|
|
|
|
|
if (log.type === 'api_message') {
|
|
|
|
|
return 'badge-info';
|
|
|
|
|
}
|
|
|
|
|
return 'badge-secondary';
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
sendEvent() {
|
2018-11-27 11:13:24 +00:00
|
|
|
$.post('/{{ request()->path() }}/event', {
|
2018-11-26 22:06:16 +00:00
|
|
|
_token: '{{ csrf_token() }}',
|
2018-12-01 13:17:32 +00:00
|
|
|
key: this.app.key,
|
|
|
|
|
secret: this.app.secret,
|
|
|
|
|
appId: this.app.id,
|
2018-11-25 21:24:31 +00:00
|
|
|
channel: this.form.channel,
|
|
|
|
|
event: this.form.event,
|
|
|
|
|
data: this.form.data,
|
2018-11-26 07:51:59 +00:00
|
|
|
}).fail(() => {
|
2018-11-25 21:24:31 +00:00
|
|
|
alert('Error sending event.');
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
2018-11-23 23:06:28 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
