forked from alfari16/realtime-chat-app-vue-socket
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (82 loc) · 2.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Real Time Chat App With Vue.js + Socket.io</title>
<!-- <link rel="stylesheet" href="assets/style.css"> -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.socket.io/socket.io-1.4.4.js"></script>
<script src="vue.min.js"></script>
<!-- <script src="assets/vue.js"></script> -->
</head>
<body>
<div id="root" class="flex-wrap">
<div class="text-center title">
<h1>Real Time Chat App</h1>
<p>With Vue.js + Socket.io</p>
</div>
<div class="chat-wrapper">
<transition-group class="list-chat" name="chattrans" tag="ul">
<li :key="list.time" v-for="(list,idx) in msgList" :class="{'me':token===list.id}" ><span>{{list.msg}}</span></li>
</transition-group>
</div>
<form id="msg-form" @submit.prevent="" class="flex-wrap form">
<transition appear name="fade">
<div class="helper" v-if="read">Start Chatting</div>
</transition>
<textarea autofocus tabindex="1" id="msg-box" @keyup.ctrl.enter="kirim" v-model="msg" class="form-control"></textarea>
<button class="btn btn-primary" @click="kirim">Kirim</button>
</form>
<p class="count">User(s) online : {{online}}</p>
</div>
<script>
var socket = io('/')
new Vue({
el: '#root',
data: {
msg: null,
online:0,
msgList: [],
read:true
},
watch:{
msg:function(val){
this.read=false
}
},
methods: {
kirim: function () {
if(!this.msg) return
var data = {
id:this.token,
time:new Date().getTime(),
msg:this.msg
}
socket.emit('addMsg', data)
this.msg = null
}
},
computed:{
token: function(){
return localStorage.getItem('chat-power')
}
},
mounted: function () {
var vm = this
socket.on('addMsg', function (data) {
vm.msgList.push(data)
})
socket.on('userConnect',function(res){
vm.online=res
})
},
beforeCreate:function(){
localStorage.setItem('chat-power',new Date().getTime())
}
})
</script>
</body>
</html>