Skip to content

Instantly share code, notes, and snippets.

@pnakibar

pnakibar/index.2.html

Created October 6, 2016 03:12
Show Gist options
  • Save pnakibar/e0d92e7ffca3bc7a72cf1c1afb609aab to your computer and use it in GitHub Desktop.
Save pnakibar/e0d92e7ffca3bc7a72cf1c1afb609aab to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Websocket tutorial</title>
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
</head>
<body>
<h1>
Ultimate Web Chat 0.1.0
</h1>
<div id='motd'></div>
<p id='messages'>
</p>
<input id="new-message" type="text" placeholder="New Message">
<button name="button" onclick="sendMessage()">Send</button>
<script>
const socket = io('http://localhost:3000');
const messages = document.getElementById('messages');
function addMessage(content) {
const newDiv = document.createElement('div');
const newContent = document.createTextNode(content);
newDiv.appendChild(newContent);
messages.appendChild(newDiv);
}
function sendMessage() {
const newMessage = document.getElementById('new-message').value;
socket.emit('sent message', newMessage);
document.getElementById('new-message').value = "";
}
socket.on('hello', (data) => {
document.getElementById('motd').textContent = data;
})
socket.on('messages', (data) => {
data.forEach(m => addMessage(m));
})
socket.on('new message', (data) => {
addMessage(data);
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment