javascript - 如何使用socket.io从客户端向服务器插入数据?

标签 javascript node.js reactjs mongodb

我创建了 mongochat 数据库,其中包含 chat 集合。如何在聊天集合中插入文档?每个文档都有消息和日期作为键值对。文档架构,即消息架构是:

消息.js:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// Create Schema
const MessageSchema = new Schema({
  message: {
    type: String,
    required: true
  },
  date: {
    type: Date,
    default: Date.now
  }
});

module.exports = Message = mongoose.model('Message', MessageSchema);

服务器.js:

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

const app = express();

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

mongoose.connect(db, {useNewUrlParser: true})
  .then(() => console.log('Mongodb connected...'))
  .catch( err => console.log(err));

const port = 5000;

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

let io =  socket(server);

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

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

   let chat = db.collection('chats');  <-- this is collection

      socket.on('SEND_MESSAGE', data => {
        io.emit('RECEIVE_MESSAGE', data);
      });
})

客户端.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.log(data);
            this.setState({
              messages: [...this.state.messages, data],
            });
            console.log(this.state.message);
            console.log(this.state.messages);
        };

    }

    render() {
        return (
        <div>              
    <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>
         <input id="inputmsg" type="text" placeholder="Enter Message...."
         value={this.state.message} onChange={ev => this.setState({message: ev.target.value})}/>
    <button id="send" className="button" onClick={this.sendMessage}>Send</button>               
        </div>
        )
    }
}

最佳答案

当您收到消息时,将其正文保存到您的收藏中,如下所示:

let chat = db.collection('chats');  <-- this is collection

  socket.on('SEND_MESSAGE', data => {
    const instance = new chat(data); <-- data as { message: '', date: '' }
    try {
        const result = await instance.save();
    } catch(...)
  });
 })

关于javascript - 如何使用socket.io从客户端向服务器插入数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53019977/

相关文章:

javascript - 我的 ajax/jQuery 函数不适用于动态加载的分页内容

javascript - Protractor - 设置 Safari 选项来设置窗口大小等,

node.js - 当 Passport js中的序列化和反序列化调用时

javascript - 风 sails : locals from jade template

javascript - 如何从正在卸载的背景中删除事件监听器?

javascript - 基于另一个 div 设置父 div 的样式

javascript - 将今天的日期放在多个文本框中单击

node.js - 如何让 github 的实时服务器自动重新加载我的页面?

reactjs - 如何从 React 功能组件声明 TypeScript 静态方法

javascript - 所有人共享的First Load JS在next.js中相当重