This commit is contained in:
freek 2018-11-26 08:51:59 +01:00
parent 41796a63a5
commit 90518976f5
2 changed files with 78 additions and 71 deletions

View File

@ -5,8 +5,48 @@ use BeyondCode\LaravelWebSockets\ClientProviders\ConfigClientProvider;
return [ return [
/**
* This package comes with multi tenancy out of the box. Here you can
* configure the diffente clients that can use the webSockets server.
*
* You should make sure that the app id is numeric.
*/
'clients' => [
[
'name' => env('APP_NAME'),
'app_id' => env('WEBSOCKETS_APP_ID'),
'app_key' => env('WEBSOCKETS_APP_KEY'),
'app_secret' => env('WEBSOCKETS_APP_SECRET')
],
],
/**
* This class is responsible for finding the clients. The default provider
* will use the clients defined in this config file.
*
* You can create a custom provider by implementing the
* `ClientProvier` interface.
*/
'client_provider' => ConfigClientProvider::class,
'dashboard' => [
/*
* Path for the Websockets debug dashboard
*/
'path' => '/websockets',
/*
* Middleware that will be applied to the dashboard routes.
*/
'middleware' => [
Authorize::class,
],
],
/* /*
* TODO: add the laravel style comment here * This array contains the hosts of which you want to allow incoming requests.
* Leave this empty if you want to accepts requests from all hosts.
*/ */
'allowedOrigins' => [ 'allowedOrigins' => [
@ -36,44 +76,4 @@ return [
*/ */
'passphrase' => null 'passphrase' => null
], ],
/**
* This package comes with multi tenancy out of the box. Here you can
* configure the diffente clients that can use the webSockets server.
*
* You should make sure that the app id is numeric.
*/
'clients' => [
[
'name' => env('APP_NAME'),
'app_id' => env('WEBSOCKETS_APP_ID'),
'app_key' => env('WEBSOCKETS_APP_KEY'),
'app_secret' => env('WEBSOCKETS_APP_SECRET')
],
],
/**
* This class is responsible for finding the clients. The default provider
* will use the clients defined in this config file.
*
* You can create a custom provider by implementing the
* `ClientProvier` interface.
*/
'client_provider' => ConfigClientProvider::class,
'dashboard' => [
/*
* Path for the Websockets debug console
*/
'path' => '/websockets',
/*
* Middleware that will be applied to the dashboard routes.
*/
'middleware' => [
Authorize::class,
],
]
]; ];

View File

@ -2,7 +2,8 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>WebSockets Dashboard</title> <title>WebSockets Dashboard</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script <script
src="https://code.jquery.com/jquery-3.3.1.min.js" src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
@ -22,8 +23,12 @@
</select> </select>
<label class="my-1 mr-2" for="client">Port:</label> <label class="my-1 mr-2" for="client">Port:</label>
<input class="form-control form-control-sm mr-2" v-model="port" placeholder="Port"> <input class="form-control form-control-sm mr-2" v-model="port" placeholder="Port">
<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="connect" class="mr-2 btn btn-sm btn-primary">
<button v-if="connected" type="submit" @click.prevent="disconnect" class="btn btn-sm btn-danger">Disconnect</button> Connect
</button>
<button v-if="connected" type="submit" @click.prevent="disconnect" class="btn btn-sm btn-danger">
Disconnect
</button>
</form> </form>
<div id="status"></div> <div id="status"></div>
</div> </div>
@ -42,13 +47,15 @@
<div class="row mt-3"> <div class="row mt-3">
<div class="col"> <div class="col">
<div class="form-group"> <div class="form-group">
<textarea placeholder="Data" v-model="form.data" class="form-control" id="data" rows="3"></textarea> <textarea placeholder="Data" v-model="form.data" class="form-control" id="data"
rows="3"></textarea>
</div> </div>
</div> </div>
</div> </div>
<div class="row text-right"> <div class="row text-right">
<div class="col"> <div class="col">
<button type="submit" @click.prevent="sendEvent" class="btn btn-sm btn-primary">Send event</button> <button type="submit" @click.prevent="sendEvent" class="btn btn-sm btn-primary">Send event
</button>
</div> </div>
</div> </div>
</form> </form>
@ -64,12 +71,12 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="log in logs.slice().reverse()"> <tr v-for="log in logs.slice().reverse()">
<td><span class="badge" :class="getBadgeClass(log)">@{{ log.type }}</span></td> <td><span class="badge" :class="getBadgeClass(log)">@{{ log.type }}</span></td>
<td>@{{ log.socketId }}</td> <td>@{{ log.socketId }}</td>
<td>@{{ log.details }}</td> <td>@{{ log.details }}</td>
<td>@{{ log.time }}</td> <td>@{{ log.time }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -111,34 +118,34 @@
}); });
this.pusher.connection.bind('disconnected', () => { this.pusher.connection.bind('disconnected', () => {
this.connected = false; this.connected = false;
this.logs = []; this.logs = [];
}); });
this.subscribeToChannel('disconnection'); this.subscribeToAllChannels();
this.subscribeToChannel('connection');
this.subscribeToChannel('vacated');
this.subscribeToChannel('occupied');
this.subscribeToChannel('subscribed');
this.subscribeToChannel('client-message');
this.subscribeToChannel('api-message');
}, },
disconnect() { disconnect() {
this.pusher.disconnect(); this.pusher.disconnect();
}, },
subscribeToAllChannels() {
[
'disconnection',
'connection',
'vacated',
'occupied',
'subscribed',
'client-message',
'api-message',
].forEach(channelName => this.subscribeToChannel(channelName))
},
subscribeToChannel(channel) { subscribeToChannel(channel) {
this.pusher.subscribe('{{ \BeyondCode\LaravelWebSockets\LaravelEcho\Pusher\Dashboard::LOG_CHANNEL_PREFIX }}'+channel) this.pusher.subscribe('{{ \BeyondCode\LaravelWebSockets\LaravelEcho\Pusher\Dashboard::LOG_CHANNEL_PREFIX }}' + channel)
.bind('log-message', (data) => { .bind('log-message', (data) => {
this.logs.push(data); this.logs.push(data);
}); });
}, },
getBadgeClass(log) { getBadgeClass(log) {
@ -165,7 +172,7 @@
channel: this.form.channel, channel: this.form.channel,
event: this.form.event, event: this.form.event,
data: this.form.data, data: this.form.data,
}).fail(e => { }).fail(() => {
alert('Error sending event.'); alert('Error sending event.');
}); });
} }