/
Room.html
78 lines (68 loc) · 1.94 KB
/
Room.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
{{set . "title" "Chat room"}}
{{template "header.html" .}}
<h1>WebSocket — You are now chatting as {{.user}}
<a href="/">Leave the chat room</a></h1>
<div id="thread">
<script type="text/html" id="message_tmpl">
{{raw "<%"}} if(event.Type == 'message') { %>
<div class="message <%= event.User == '{{.user}}' ? 'you' : '' %>">
<h2>{{raw "<%"}}= event.User %></h2>
<p>
{{raw "<%"}}= event.Text %>
</p>
</div>
{{raw "<%"}} } %>
{{raw "<%"}} if(event.Type == 'join') { %>
<div class="message notice">
<h2></h2>
<p>
{{raw "<%"}}= event.User %> joined the room
</p>
</div>
{{raw "<%"}} } %>
{{raw "<%"}} if(event.Type == 'leave') { %>
<div class="message notice">
<h2></h2>
<p>
{{raw "<%"}}= event.User %> left the room
</p>
</div>
{{raw "<%"}} } %>
{{raw "<%"}} if(event.Type == 'quit') { %>
<div class="message important">
<h2></h2>
<p>
You are now disconnected!
</p>
</div>
{{raw "<%"}} } %>
</script>
</div>
<div id="newMessage">
<input type="text" id="message" autocomplete="off" autofocus>
<input type="submit" value="send" id="send">
</div>
<script type="text/javascript">
// Create a socket
var socket = new WebSocket('ws://'+window.location.host+'/websocket/room/socket?user={{.user}}')
// Display a message
var display = function(event) {
$('#thread').append(tmpl('message_tmpl', {event: event}));
$('#thread').scrollTo('max')
}
// Message received on the socket
socket.onmessage = function(event) {
display(JSON.parse(event.data))
}
$('#send').click(function(e) {
var message = $('#message').val()
$('#message').val('')
socket.send(message)
});
$('#message').keypress(function(e) {
if(e.charCode == 13 || e.keyCode == 13) {
$('#send').click()
e.preventDefault()
}
})
</script>