mirror of
https://github.com/guilhermewerner/chat
synced 2025-06-15 10:54:18 +00:00
Change events naming convention and split js code
This commit is contained in:
@ -38,7 +38,7 @@
|
||||
<div class="pt-4">
|
||||
<form id="chat">
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Username</label>
|
||||
<label for="exampleInputEmail1">Name</label>
|
||||
<input type="text" class="form-control" name="username">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
@ -73,38 +73,7 @@
|
||||
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var socket = io('http://192.168.0.25:3333');
|
||||
|
||||
function renderMessage(message) {
|
||||
$('#messages').append(`<li class="list-group-item"><strong>${message.author}:</strong> ${message.content}</li>`);
|
||||
}
|
||||
|
||||
socket.on('previousMessages', function (messages) {
|
||||
for (message of messages) {
|
||||
renderMessage(message);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('receiveMessage', function (message) {
|
||||
renderMessage(message);
|
||||
});
|
||||
|
||||
$('#chat').submit(function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var author = $('input[name=username]').val();
|
||||
var content = $('textarea[name=message]').val();
|
||||
|
||||
if (author.length && content.length) {
|
||||
var messageObj = { author, content }
|
||||
}
|
||||
|
||||
renderMessage(messageObj);
|
||||
|
||||
socket.emit('sendMessage', messageObj);
|
||||
})
|
||||
</script>
|
||||
<script src="./socket.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
30
Public/socket.js
Normal file
30
Public/socket.js
Normal file
@ -0,0 +1,30 @@
|
||||
var socket = io('http://192.168.0.25:3333');
|
||||
|
||||
function renderMessage(message) {
|
||||
$('#messages').append(`<li class="list-group-item"><strong>${message.author}:</strong> ${message.content}</li>`);
|
||||
}
|
||||
|
||||
socket.on('previous-messages', function (messages) {
|
||||
for (message of messages) {
|
||||
renderMessage(message);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('receive-message', function (message) {
|
||||
renderMessage(message);
|
||||
});
|
||||
|
||||
$('#chat').submit(function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var author = $('input[name=username]').val();
|
||||
var content = $('textarea[name=message]').val();
|
||||
|
||||
if (author.length && content.length) {
|
||||
var messageObj = { author, content }
|
||||
}
|
||||
|
||||
renderMessage(messageObj);
|
||||
|
||||
socket.emit('send-message', messageObj);
|
||||
});
|
@ -29,11 +29,11 @@ let messages = [];
|
||||
io.on('connection', socket => {
|
||||
console.log(`Socket ${socket.id} connected`);
|
||||
|
||||
socket.emit('previousMessages', messages);
|
||||
socket.emit('previous-messages', messages);
|
||||
|
||||
socket.on('sendMessage', data => {
|
||||
socket.on('send-message', data => {
|
||||
messages.push(data);
|
||||
socket.broadcast.emit('receiveMessage', data);
|
||||
socket.broadcast.emit('receive-message', data);
|
||||
})
|
||||
})
|
||||
|
||||
|
Reference in New Issue
Block a user