Ir para conteúdo
Gilberto Jr

CHAT SOCKET.IO NODE JS

Por , em Javascript

Recommended Posts

Gilberto Jr    26

Gilberto Jr
Postado

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/>&nbsp&nbsp'+ 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 Jr

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • cmoreira1300
      Meu programa não consegue identificar o dotenv na middleware
      Por cmoreira1300
      Meu programa não consegue identificar o dotenv na middleware
      Eu estava fazendo um CRUD simples, implementei o dotenv no meu programa, está funcionando quando faço a conexão com o banco de dados e a inserção e uma função normal,  mais quando vou fazer isso dentro de uma middleware ele não chama meu dotenv, só funciona quando tiro o process.env e ponho as informações direto na função de conexão.
      require( 'dotenv' ).config( { path: '../../.env' } ) const mysql = require( 'mysql2' ) // DESSA FORMA NÃO FUNCIONA const connection_pool = mysql.createPool( { host: process.env.DB_HOST, user: process.env.DB_USER, database: process.env.DB_DATABASE, password: process.env.DB_PASS } ) // DESSA FORMA FUNCIONA // const connection_pool = mysql.createPool( { // host: 'localhost', // user: 'carlos', // database: 'simple_crud', // password: 'pass1241' // } ) module.exports = connection_pool.promise() INSERÇÃO NO BANCO DE DADOS
      const db_conn = require( '../db/connection' ) const createNewClient = ( name ) => { return db_conn.execute( `INSERT INTO client ( name ) values (?)`, [ name ] ) } module.exports = { createNewClient } FAZENDO A INSERÇÃO NO MIDDLEWARE
      const data = require( '../data/client' ) const createClient = ( req, res, next ) => { const client = req.body.name data.createNewClient( client ) .then( () => { res.status( 200 ).json( { 'status': 'sucess', 'client': client } ) } ) .catch( ( err ) => { res.status( 404 ).json( { status: 'error', error: err } ) } ) .finally( () => { next() } ) } module.exports = { createClient } { "status": "error", "error": { "message": "Access denied for user ''@'localhost' (using password: YES)", "code": "ER_ACCESS_DENIED_ERROR", "errno": 1045, "sqlState": "28000", "sqlMessage": "Access denied for user ''@'localhost' (using password: YES)" } }  Esse é o erro que obtenho quando uso o dotenv, lenbrando que as informações de login estão todas certas, e que em outra função que não seja um middleware funciona.
    • Algorithm
      Erro de Syntax [ GraphQL + NodeJS ]
      Por Algorithm
      Olá a todos
       
      Eu estou codificando um exemplo de uso do GraphQL com Nodejs, mas eu estou recebendo um erro de syntax relacionado a [ : ] [ Dois Pontos ], mas eu comparei meu codigo, com o da documentação oficial e esta tudo certo. Será que alguem, conseguiria achar o erro ?
       
      OBS: Esta incluso neste post [ Exemplo Documentação, Meu Exemplo, Mensagem de Erro, Código Completo ]
       
      Exemplo Documentação
      module.exports = /* GraphQL */ ` type Client { id: ID! name: String age: Int products: [Product] } type Query { clients: [Client] client(id: ID!): Client } type Mutation { addClient(name: String!, age: Int!): Client } `  
      Meu Exemplo
      const typeDefs = ` type Pessoa { _id: ID _codigo: Float _nome: String _idade: Int _email: String } input inputPessoa { _codigo: Float _nome: String _idade: Int _email: String } type Query { resposta: String saudacao(nome: String!): String findPessoaOne(codigo: Float): Pessoa findPessoa(input: inputPessoas): [Pessoa] } type Mutation { insertPessoa(input: inputPessoa): Pessoa updatePessoa(codigo: Float, input: inputPessoa) Pessoa deletePessoa(codigo: Float) [Pessoa] } `;  
      Mensagem de Erro
      C:\Users\Core\node\node_modules\graphql\language\parser.js:1413 throw (0, _syntaxError.syntaxError)( ^ GraphQLError: Syntax Error: Expected ":", found Name "Pessoa". at syntaxError (C:\Users\Core\node\node_modules\graphql\error\syntaxError.js:15:10) at Parser.expectToken (C:\Users\Core\node\node_modules\graphql\language\parser.js:1413:40) at Parser.parseFieldDefinition (C:\Users\Core\node\node_modules\graphql\language\parser.js:847:10) at Parser.optionalMany (C:\Users\Core\node\node_modules\graphql\language\parser.js:1510:28) at Parser.parseFieldsDefinition (C:\Users\Core\node\node_modules\graphql\language\parser.js:831:17) at Parser.parseObjectTypeDefinition (C:\Users\Core\node\node_modules\graphql\language\parser.js:803:25) at Parser.parseDefinition (C:\Users\Core\node\node_modules\node_modules\graphql\language\phql\language\parser.js:171:23) at Parser.many (C:\Users\Core\node\node_modules\graphql\language\parser.js:1529:26) at Parser.parseDocument (C:\Users\Core\node\node_modules\graphql\language\parser.js:121:25) at parse (C:\Users\Core\node\node_modules\graphql\language\parser.js:32:17) { path: undefined, locations: [ { line: 26, column: 57 } ], extensions: [Object: null prototype] {} }  
      Codigo Completo
      // Requires const express = require('express'); const GraphQL_HTTP = require('express-graphql'); const { mergeSchemas } = require('@graphql-tools/schema'); // Run // const connect = MongoClient.connect(''); const app = express(); const getCode = () => { return 10 }; // GraphQL Definitions || Query and Mutation const typeDefs = ` type Pessoa { _id: ID _codigo: Float _nome: String _idade: Int _email: String } input inputPessoa { _codigo: Float _nome: String _idade: Int _email: String } type Query { resposta: String saudacao(nome: String!): String findPessoaOne(codigo: Float): Pessoa findPessoa(input: inputPessoas): [Pessoa] } type Mutation { insertPessoa(input: inputPessoa): Pessoa updatePessoa(codigo: Float, input: inputPessoa) Pessoa deletePessoa(codigo: Float) [Pessoa] } `; // Functions const resolvers = { Query: { resposta: function() { return `GraphQL Conectado com Sucesso...`; }, saudacao: function(_, args) { return `Olá ${args.nome}! Seja Muito Bem Vindo(a) a GraphQL!!!! ` }, findPessoaOne: function(_, args) { return db.collection('GraphQL-Pessoa').findOne({codigo: args.codigo}) .then((result) => { return result; }); }, findPessoa: function(_, args) { return db.collection(`GraphQL-Pessoa`).find(args.input).toArray() .then((result) => { return result; }); }, Mutation: { insertPessoa: function(_, args) { args.input.codigo = getCode(); return db.collection(`GraphQL-Pessoa`).insertOne(args.input) .then((result) => { return result.ops[0]; }); }, updatePessoa: function(_, args) { return db.collection('GraphQL-Pessoa').updateOne({codigo: args.codigo}, {$set: args.input}) .then((result) => { if(result.result.n > 0) return `Registro Alterado com Sucesso!`; else return `Ocorreu um erro ao alterar o registro`; }); }, deletePessoa: function(_, args) { return db.collection(`GraphQL-Pessoa`).deleteOne({codigo: args.codigo}) .then((result) => { if(result.result.n > 0) return `Registro Deletado com Sucesso!`; else return `Ocorreu um erro ao deletar o registro`; }); } } } }; const schema = mergeSchemas({ typeDefs: typeDefs, resolvers: resolvers }) // Listen app.listen(3005, () => { console.log(`Servidor Rodando na Porta 3005`); })  
       
      Obrigado
    • Ferdz-Agencia-Digital
      Filtrar o que estou trazendo no NavLink
      Por Ferdz-Agencia-Digital
      Estou importando o NavLink do react-router-dom e montando o meu menu assim:
       
      <Nav navbar>{createLinks(routes)}</Nav>  
      No arquivo routes.js estou montando enviando conforme código abaixo:
       
      var routes = [ { path: "/index", name: "Dashboard", icon: "ni ni-tv-2 text-primary", component: Index, tipo: 1, layout: "/admin", }, { path: "/solicitacoes-trabalho", name: "Solicitações", icon: "ni ni-cart text-orange", tipo: 1, component: Solicitacoes, layout: "/admin", }, { path: "/Clientes", name: "Clientes", icon: "ni ni-single-02 text-orange", tipo: 2, component: Clientes, layout: "/admin", }, ]; export default routes;  
      Há como na exibição eu conseguir filtrar pelo tipo e só mostrar o que for do tipo 1 ?
    • FerdzFernando
      API express.js e MySQL x API express.js e MongoDB
      Por FerdzFernando
      Estou montando uma API para usar com BD MySQL, mas futuramente migraremos o BD para MongoDB... deverei mudar muitas coisas da API ? Terei muito retrabalho ?
       
      O que acontece é que o projeto já existe e atualmente o BD é em MySQL e APIs em PHP... mas o projeto será migrado para a stack  MERN (MongoDB, Express, React e Node)
    • Carcleo
      Obter o headers fora do server apenas importando o http é possível?
      Por Carcleo
      Tenho o seguinte:   const http = require("http") const host = "localhost" const port = "80" const Config = require("./Config") const server = http.createServer() server.on('request', (request, response) => { response.writeHead(200, {"Content-Type": "text/html; charset=utf-8"}) const { headers, method, url } = request Config.has("/", Config.home) response.end() }); server.listen(port, host)   Preciso arranjar uma forma de na Classe config, obter o headers mas sem passar ele via construtor tipo   New Config (headers)   dentro de    server.on()   Tentei, na classe Config importar o http novamente mas parece que só consigo o headers dentro do server    Alguma saída?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito