-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
97 lines (85 loc) · 3.9 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
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="count">
<span id="count_txt"></span>
<span>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.995-.944v-.002.002zM7.022 13h7.956a.274.274 0 00.014-.002l.008-.002c-.002-.264-.167-1.03-.76-1.72C13.688 10.629 12.718 10 11 10c-1.717 0-2.687.63-3.24 1.276-.593.69-.759 1.457-.76 1.72a1.05 1.05 0 00.022.004zm7.973.056v-.002.002zM11 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0zM6.936 9.28a5.88 5.88 0 00-1.23-.247A7.35 7.35 0 005 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 015 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10c-1.668.02-2.615.64-3.16 1.276C1.163 11.97 1 12.739 1 13h3c0-1.045.323-2.086.92-3zM1.5 5.5a3 3 0 116 0 3 3 0 01-6 0zm3-2a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd"></path></svg>
</span>
</div>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var messages = document.getElementById('messages');
var form = document.getElementById('form');
var input = document.getElementById('input');
var countEle = document.getElementById('count')
var count_txt = document.getElementById('count_txt')
var name = prompt("Enter your name")
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log("no");
}
}
function showPosition(position) {
console.log('Latitude:', position.coords.latitude);
console.log('Longitude:', position.coords.longitude);
socket.emit('location', { latitude: position.coords.latitude, longitude: position.coords.longitude, user: name })
}
// this is causing the roomId to not appear on server side
getLocation()
var roomId = ''
socket.on('room', (room) => {
console.log(room);
roomId = room
// console.log('called new user here');
})
// socket.emit('new user', { name: name, room: roomId })
socket.on('new user', user => {
console.log(user);
var userEle = document.createElement('h3')
userEle.innerHTML = `${user.name} has joined the chat`
userEle.style.textAlign = 'center';
messages.appendChild(userEle)
})
socket.on('count',(count)=>{
// console.log('users count');
console.log(count);
count_txt.innerText = count
})
form.addEventListener('submit', function (e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', { msg: input.value, name: name, room: roomId });
input.value = '';
}
});
socket.on('chat message', (msg) => {
console.log(msg);
var item = document.createElement('li');
item.innerHTML = `${msg.name}<br>${msg.msg}`;
var msgDiv = document.createElement('div')
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
socket.on('user left',(user)=>{
console.log(`${user} has left`);
var userEle = document.createElement('h3')
userEle.innerHTML = `${user} has left the chat`
userEle.style.textAlign = 'center';
userEle.style.color = 'red'
messages.appendChild(userEle)
})
</script>
</body>
</html>