Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite.
Eu fiz esse chat usando socket.io com NODE JS.
Esta funcionando perfeito.
Porem eu queria implementar duas coisas nele.
Queria que quando chegasse uma mensagem, aparecesse uma notificação informando o nome da pessoa que enviou, e também parte da mensagem.
E também, quando chegasse uma mensagem, mudar o TITTLE do HTML pra parte da mensagem.
Mas isso deve acontecer, somente no browser das pessoas que receberem a mensagem. A pessoa que enviou, não deve receber a notificação e também o nem deve mudar o TITLE da pagina HTML.
Abaixo segue o código do FRONT END.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chat Sistema Distribuido</title>
<script src="jquery.min.js"></script>
<script src="socket.io.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="chat">
<input type="text" name="username" placeholder="Digite seu usuário">
<div class="messages"></div>
<input type="text" name="message" placeholder="Digite sua mensagem">
<button type="submit">Enviar</button>
</form>
<script type="text/javascript">
var socket = io('http://localhost:3000');
function renderMessage(message){
$('.messages').append('<div class="message"><strong>'+ message.author +'</strong>:<br/>  '+ message.message +'</div>')
};
socket.on('previousMessages', function(messages){
for(message of messages){
renderMessage(message);
};
});
socket.on('receivedMessage', function(message){
renderMessage(message);
});
$('#chat').submit(function(event){
event.preventDefault();
var author = $('input[name=username]').val();
var message = $('input[name=message]').val();
if(author.length && message.length){
var messageObject = {
author: author,
message: message,
};
renderMessage(messageObject);
socket.emit('sendMessage', messageObject);
}
});
</script>
</body>
</html>
Abaixo o código da pagina server.js
const express = require('express');
const path = require('path');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'public'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use('/', (req, res) => {
res.render('index.html');
});
let messages = [];
io.on('connection', socket => {
console.log(`Socket Conectado: ${socket.id}`);
socket.emit('previousMessages', messages);
socket.on('sendMessage', data =>{
messages.push(data);
socket.broadcast.emit('receivedMessage', data);
});
});
server.listen(3000);
Se alguém puder me ajudar.
Obrado
Gilberto JrCarregando comentários...