Как отправить данные в socket.io?

Я создал коллекцию под названием chat. Теперь я могу сохранить чат в mongodb, нажав кнопку отправки, но как я могу отображать данные на лицевой стороне?

server.js:

    const express = require('express');
const mongoose = require('mongoose');
const socket = require('socket.io');
const message = require('./model/message')

const app = express();

const mongoURI = require('./config/keys').mongoURI;

mongoose.connect(mongoURI, {useNewUrlParser: true})
  .then()
  .catch( err => console.info(err));

let db = mongoose.connection;

const port = 5000;

let server = app.listen(5000, function(){
  console.info('server is running on port 5000')
});

let io =  socket(server);

io.on("connection", function(socket){
  console.info("Socket Connection Established with ID :"+ socket.id)

  socket.on('disconnect', function(){
    console.info('User Disconnected');
  });

  let chat = db.collection('chat');

      socket.on('SEND_MESSAGE', function(data){
        let message = data.message;
        let date = data.date;

        // Check for name and message
        if (message !== '' || date !== ''){
            // Insert message
            chat.insert({message: message, date:date}, function(){
                socket.emit('RECEIVE_MESSAGE', [data]);
            });
        }
    });

    chat.find({}).limit(100).sort({_id:1}).toArray(function(err, res){
      if (err){
          throw err;
      }
      // Emit the messages
      socket.emit('RECEIVE_MESSAGE', res);
    });

}) 

chat.js:

   import React, { Component } from 'react'
import './chat.css'
import io from "socket.io-client";

export default class Chat extends Component {

    constructor(props){
        super(props);

        this.state = {
            message: '',
            date: '',
            messages: []
        };

        const socket = io('localhost:5000');

        this.sendMessage = event => {
            event.preventDefault();

            if (this.state.message !== ''){
                socket.emit('SEND_MESSAGE', {
                    message: this.state.message,
                    date: Date.now()
                });
                this.setState({ message: '', date: '' });
            }
        };

        socket.on('RECEIVE_MESSAGE', data => {
            addMessage(data);
        });

        const addMessage = data => {
            console.info(data);
            this.setState({
              messages: [...this.state.messages, data],
            });
            console.info(this.state.message);
            console.info(this.state.messages);
        };

    }

    render() {
        return (
        <div>
                <div id = "status"></div>
                <div id = "chat">
                    <div className = "card">
                        <div id = "messages" className = "card-block">
                            {this.state.messages.map((message, index) => {
                                    return (
                                        <div key = {index} className = "msgBox"><p className = "msgText">{message.message}</p></div>
                                    )
                            })}
                        </div>
                    </div>
                    <div className = "row">
                        <div className = "column">
                            <input id = "inputmsg" type = "text" placeholder = "Enter Message...."
                            value = {this.state.message} onChange = {ev => this.setState({message: ev.target.value})}/>
                        </div>
                        <div className = "column2">
                            <button id = "send" className = "button" onClick = {this.sendMessage}>Send</button>
                        </div>
                    </div>
                </div>
        </div>
        )
    }
}

В chat.js я отображаю массив сообщений. В chat.js работает событие SEND_MESSAGE, т.е. я могу вставлять документы внутри mongodb, но как я могу вернуть данные и отобразить их с помощью socket.io?

Весь код: https://gist.github.com/aditodkar/0328809b636aca142ffb8cffdc320b3b

Скриншот:

Как отправить данные в socket.io?

Вашему интерфейсу нужен прослушиватель socket.on, чтобы он мог обрабатывать входящие излучения от одноранговых узлов.

Womble 27.10.2018 17:50

@SensationSama gist.github.com/aditodkar/389cce1bb00113fa96b20b5df0e683a7

fun joker 27.10.2018 18:14
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
97
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Возможно, вам нужно использовать строку 30 на вашем клиенте:

socket.on('RECEIVE_MESSAGE', data => {
            addMessage(data);
        });

но вы используете:

socket.emit('RECEIVE_MESSAGE', data => {
            addMessage(data);
        });

ОБНОВИТЬ:

import React, { Component } from 'react'
import './chat.css'
import io from "socket.io-client";

export default class Chat extends Component {

    constructor(props){
        super(props);

        this.state = {
            message: '',
            date: '',
            messages: []
        };
        this.sendMessage = this.sendMessage.bind(this);
        this.addMessage = this.addMessage.bind(this);

        this.socket = io('localhost:5000');
    }

    componentDidMount() {
      this.socket.on('RECEIVE_MESSAGE', data => {
          this.addMessage(data);
      });
    }

    sendMessage(event) {
      event.preventDefault();

      if (this.state.message !== ''){
        this.socket.emit('SEND_MESSAGE', {
            message: this.state.message,
            date: Date.now()
        });
        this.setState({ message: '', date: '' });
      }
    };

    addMessage(data) {
      console.info(data);
      this.setState({
        messages: [...this.state.messages, data],
      });
      console.info(this.state.message);
      console.info(this.state.messages);
    };

    render() {
        return (
        <div>
                <div id = "status"></div>
                <div id = "chat">
                    <div className = "card">
                        <div id = "messages" className = "card-block">
                            {this.state.messages.map((message, index) => {
                                    return (
                                        <div key = {index} className = "msgBox"><p className = "msgText">{message.message}</p></div>
                                    )
                            })}
                        </div>
                    </div>
                    <div className = "row">
                        <div className = "column">
                            <input id = "inputmsg" type = "text" placeholder = "Enter Message...."
                            value = {this.state.message} onChange = {ev => this.setState({message: ev.target.value})}/>
                        </div>
                        <div className = "column2">
                            <button id = "send" className = "button" onClick = {this.sendMessage}>Send</button>
                        </div>
                    </div>
                </div>
        </div>
        )
    }
}

Вы пытались поместить пустой объект в функцию поиска? найти({})

AlbertS 27.10.2018 18:35

Ах да, теперь эта ошибка -> TypeError: Cannot read property 'limit' of undefined исчез после добавления find({}) вместо find()

fun joker 27.10.2018 18:41

Но теперь проблема в том, что сообщение появляется на стороне клиента, но оно не отображается на экране, потому что я использую this.setState({ message: '', date: '' });, поэтому отображается пустое сообщение, как я могу установить состояние даты и сообщения после отображения данных на экране?

fun joker 27.10.2018 18:43

Теперь я изменил код, как я могу отобразить сообщение на экране, а затем установитьState -> this.setState({ message: '', date: '' });

fun joker 27.10.2018 18:45

Вы используете setState внутри конструктора. См. stackoverflow.com/questions/34961853/…

AlbertS 27.10.2018 18:53

В моем случае, где я должен установитьState для изменения сообщения и даты обратно на пустую строку ""?

fun joker 27.10.2018 18:55

См. Обновление выше. Не проверял, работает ли. Но это должно быть написано так.

AlbertS 27.10.2018 19:04

Другие вопросы по теме