-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
123 lines (113 loc) · 5.28 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Chatter - Direct Messaging / Chating App</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container" id="app">
<div class="left">
<div class="top">
<input type="text" />
</div>
<ul class="people" v-cloak>
<li v-bind:class="'person' + (toUserID == user.id ? ' active' : '')" v-bind:data-chat="user.name" v-for="user in onlineUsers" @click="toUserID = user.id">
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png" alt="" />
<span class="name">{{ user.name }}</span>
<span class="time">{{ '4:00 PM' }}</span>
<span class="preview">{{ '...' }}</span>
</li>
</ul>
</div>
<div class="right" v-if="toUserID" v-cloak>
<div class="top"><span>To: <span class="name">{{ toUser.name }}</span></span></div>
<div v-bind:class="'chat' + (toUserID == user.id ? ' active-chat' : '')" v-bind:data-chat="user.id" v-for="user in onlineUsers">
<div v-bind:class="'bubble ' + (msg.from == currentUser.id ? 'me' : 'you')" v-for="msg in myMessages">
{{ msg.text }}
</div>
</div>
<div class="write">
<a href="javascript:;" class="write-link attach"></a>
<input type="text" v-model="message" @keyup.enter.prevent="sendMessage" />
<!--<a href="javascript:;" class="write-link smiley"></a>-->
<a href="#" class="write-link send" @click.prevent="sendMessage"></a>
</div>
</div>
</div>
</div>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
socket: null,
message: '',
messages: [],
users: [],
currentUser: {},
toUserID: ''
},
mounted: function () {
var userName = window.prompt('Enter Your User Name');
var userID = parseInt(window.prompt('Enter Your User ID'));
this.currentUser = {id: userID, name: userName};
/* Socket Start Here */
this.socket = io();
this.socket.emit('online user', this.currentUser);
var self = this;
this.socket.on('online users list', function(users) {
Vue.set(self, 'users', users);
});
this.socket.on('chat message', function(msg, from) {
var id = self.messages.length + 1;
self.messages.push({ id: id, from: from, to: self.currentUser.id, text: msg });
//@Todo - Store the messages somewhere
});
/* Socket End Here */
},
computed: {
onlineUsers: function () {
var self = this;
return this.users.filter(function (user) {
return user.id != self.currentUser.id;
});
},
toUser: function () {
var self = this;
return this.users.filter(function (user) {
return (user.id == self.toUserID);
})[0];
},
myMessages: function () {
var self = this;
return this.messages.filter(function (message) {
if ((message.from == self.toUserID && message.to == self.currentUser.id) || (message.from == self.currentUser.id && message.to == self.toUserID)) {
return message;
}
}).sort(function (a, b) {
a.id - b.id;
});
}
},
methods: {
sendMessage: function () {
var id = this.messages.length + 1;
this.messages.push({ id: id, from: this.currentUser.id, to: this.toUserID, text: this.message });
//@Todo - Store the messages somewhere
this.socket.emit('chat message', this.message, this.toUserID, this.currentUser.id);
this.message = '';
}
}
})
</script>
</body>
</html>