How to insert data from client to server using socket.io?
我创建了具有
message.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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); |
server.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 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); }); }) |
client.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 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 ( {this.state.messages.map((message, index) => { return ( <p className="msgText">{message.message}</p> ) })} <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> ) } } |
当您收到消息时,将其正文保存到您的收藏中,如下所示:
1 2 3 4 5 6 7 8 9 | 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(...) }); }) |