-
Notifications
You must be signed in to change notification settings - Fork 26
/
chat.html
131 lines (114 loc) · 4.49 KB
/
chat.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
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to golang chat</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style media="screen">
.messages{
display: block;
padding: 9.5px;
text-align: left;
margin: 0 0 10px;
font-size: 13px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,0.15);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container h-100">
<h1 class="text-center">Welcome to chat powered by Golang</h1>
<div class="text-center">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="col-12">
<span id="connectionStatus">Please start typing something to start the chat session</span>
<pre id="output" class="messages"></pre>
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group row">
<label for="example-text-input" class="col-2 col-form-label">User Name</label>
<div class="col-10">
<input class="form-control" type="text" value="" id="userName" placeholder="Enter User Name to join">
</div>
</div>
<div class="form-group row">
<label for="userMessage" class="col-2 col-form-label">Message</label>
<div class="col-10">
<textarea class="form-control" value="" id="userMessage" placeholder="Start typing the message" rows="3"></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary" onClick="send()">Send</button>
</div>
</div>
</div>
</div>
<script>
var message = document.getElementById("userMessage")
var userName = document.getElementById("userName")
var output = document.getElementById("output")
var hostName = location.hostname;
var socket;
if(hostName.indexOf("herokuapp") !== -1){
socket = new WebSocket("wss://"+hostName+"/chat")
}
else if (hostName == "dev.walmart.com" || hostName == "localhost") {
socket = new WebSocket("ws://dev.walmart.com:9999/chat")
}
socket.onopen = function() {
connectionStatus.innerHTML = "Status: Connected\n";
}
socket.onmessage = function(e) {
var messageDetails = JSON.parse(e.data);
var divNode = document.createElement("div");
var userSpanNode = document.createElement("span");
var boldNode = document.createElement("strong");
var messageSpanNode = document.createElement("span");
userSpanNode.setAttribute("class","col col-md-4");
messageSpanNode.setAttribute("class", "col col-md-8");
divNode.setAttribute("class", "row");
var userTextnode = document.createTextNode(messageDetails.userName+"-"+messageDetails.timestamp+" : ");
var messageTextnode = document.createTextNode(messageDetails.body+ "\n");
boldNode.appendChild(userTextnode);
userSpanNode.appendChild(boldNode);
messageSpanNode.appendChild(messageTextnode);
divNode.appendChild(userSpanNode);
divNode.appendChild(messageSpanNode);
document.getElementById("output").appendChild(divNode);
}
function send() {
if(userName.value === "") {
userName.value = "Anonymous"
}
var time = new Date();
var currenTimeStamp = time.toLocaleString('en-US', { hour: 'numeric',minute:'numeric', hour12: true });
var messageDetails = {
userName: userName.value,
body: message.value,
timestamp: currenTimeStamp
}
socket.send(JSON.stringify(messageDetails));
message.value = "";
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-105302950-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>