Permalink
Browse files

同一アカウントで別の端末からログインがあったことを画面に通知するコンポーネントの作成

  • Loading branch information...
adjust-fuchigami committed Nov 6, 2017
1 parent 32b4b30 commit 567d9504d9fb41786c7712179f7a7f6561bbd17c
@@ -16,6 +16,7 @@ window.Vue = require('vue');
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('message-component', require('./components/MessageComponent.vue'));
const app = new Vue({
el: '#app'
@@ -51,3 +51,13 @@ if (token) {
// broadcaster: 'pusher',
// key: 'your-pusher-key'
// });
import Echo from 'laravel-echo'
import ioClient from 'socket.io-client'
window.io = ioClient
window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname + ':6001',
});
@@ -0,0 +1,34 @@
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div
class="alert alert-danger alert-dismissible"
role="alert"
v-for="m in messages"
>
<button type="button" class="close" data-dismiss="alert" aria-label="閉じる"><span aria-hidden="true">×</span></button>
{{m}}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['userId'],
data: function () {
return {
messages: []
}
},
mounted() {
window.Echo
.private('user.logined.'+this.userId)
.listen('BroadcastUserLogined', (e) => {
this.messages.push('別の場所からログインがありました(IPアドレス:'+ e.client_ip+')')
})
}
}
</script>
@@ -71,6 +71,10 @@
</div>
</nav>
@auth
<message-component user-id="{{auth()->user()->id}}"></message-component>
@endauth
@yield('content')
</div>

0 comments on commit 567d950

Please sign in to comment.