javascript - 如何根据价值加入reactjs中的房间？

Question

嗨，我正在尝试制作协作白板。我希望能够有一个功能，让用户可以拥有不同的房间，将白板上的更改分开，这样其他人就不会看到它。我希望它能够基于代码/数字或文本加入无关紧要。我曾尝试在互联网上对其进行研究，但它非常复杂，我希望有人可以为我提供一个简单的示例，如何根据我的代码实现它。这是我的 server.js

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
const mysql = require('mysql')
var bodyParser = require('body-parser');
app.use(bodyParser.json({type:'application/json'}));
app.use(bodyParser.urlencoded({extended:true}));
var ip = require("ip");
const connection = mysql.createConnection({
      host: "localhost",
      port: "3306",
      user: "root",
      password: "-----",
      database: "pictures"
})
export const ipAdress = ip.address();
console.log(ipAdress)

connection.connect(function(error){
      if(error) console.log(error);
      else console.log("connected");
});

app.get('/user', function(req, res){
      res.header('Access-Control-Allow-Origin', '*');
      connection.query('select * from pictures', function(error, rows, fields){
            if(error) console.log(error);
    
            else{
                console.log(rows);
                res.send(rows);
    
            }
    
      });
    });

io.on('connection', (socket)=> {
      console.log('User Online');

      socket.on('canvas-data', (data)=> {
            socket.broadcast.emit('canvas-data', data);
            
      })
})

var server_port = process.env.YOUR_PORT || process.env.PORT || 5000;
http.listen(server_port,  () => {
    console.log("Started on : "+ server_port);
})

这是白板的 React 组件

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Board from '../board/Board';
import DragMove from "../DragMove";
import $ from 'jquery';
import Safe from "react-safe";
import 'jquery-ui-dist/jquery-ui';
import Draggable from 'react-draggable';
import io from 'socket.io-client';
import { Text, View,FlatList} from 'react-native';
import './style.css';


class Container extends React.Component
{
  
    state ={
        userData:[],
        images:[{image:'images/kitten.jpg'}, {image:'images/penguin.jpg'}],
        id: 0
      }
    
      timeout;
      socket = io.connect();
  
      ctx;
      isDrawing = false;
      rect = true;
      image;

      constructor(props) {
        super(props);

        this.socket.on("canvas-data", function(data){

            var root = this;
            var interval = setInterval(function(){
                if(root.isDrawing) return;
                root.isDrawing = true;
                clearInterval(interval);
                var image = new Image()
                var canvas = document.querySelector('#board');
                var ctx = canvas.getContext('2d');
                image.onload = function() {
                    ctx.drawImage(image, 0, 0);
                    
                    root.isDrawing = false;
                };
                image.src = data;
            }, 200)
        })
        
    }
 
    
    
        async componentDidMount() {
            this.drawOnCanvas();
            const url = "http://192.168.1.14:5000/user";
            const response = await fetch(url);
            const data = await response.json(); 
            this.setState({userData: data});
            console.log(this.state.userData);
            var root = this;
            var canvas=document.getElementById("board");
            var ctx=canvas.getContext("2d");
    
            var $canvas=$("#board");
            var Offset=$canvas.offset();
            var offsetX=Offset.left;
            var offsetY=Offset.top;
    
            var x,y,width,height;
    
            var $images=$(".img");
    
            $(function(){
                $images.draggable({
                    helper:'clone',
                });
    
            $images.each(function(index, element){
                $(this).data("imagesIndex", index);
            });
    
            $canvas.droppable({
                drop:dragDrop,
            });
    
            function dragDrop(e, ui){
                x=parseInt(ui.offset.left-offsetX)-1;
                y=parseInt(ui.offset.top-offsetY-125);
                width=ui.helper[0].width;
                height=ui.helper[0].height;
    
                var image = new Image();
                var theIndex=ui.draggable.data("imagesIndex");
                ctx.drawImage($images[theIndex], x, y, width, height);
    
                var tempCanvas=document.createElement('canvas');
                var tempCtx=tempCanvas.getContext('2d');
                tempCanvas.width=width;
                tempCanvas.height=height;
                //tempCtx.drawImage(canvas,x,y,width,height,0,0,width,height);
                var img=new Image();

                img.onload=function(){
                    ctx.drawImage(img, x, y, width, height )
                };
                img.src=tempCanvas.toDataURL();
                console.log(img.src);
               
                $(".img").dblclick(function() {
                    $(this).remove();
                    });     
            }
    
            })
    }

    changeColor(params) {
        this.setState({
            color: params.target.value
        })
    }

    changeSize(params) {
        this.setState({
            size: params.target.value
        })
    }
    




    clickMe(){
        this.rect = true
        alert(this.rect)
    }
 

    componentWillReceiveProps(newProps) {
        this.ctx.strokeStyle = newProps.color;
        this.ctx.lineWidth = newProps.size;
    }

    drawOnCanvas() {
        var canvas = document.querySelector('#board');
        this.ctx = canvas.getContext('2d');
        var ctx = this.ctx;

        var sketch = document.querySelector('#dropHere');
        var sketch_style = getComputedStyle(sketch);
        canvas.width = parseInt(sketch_style.getPropertyValue('width'));
        canvas.height = parseInt(sketch_style.getPropertyValue('height'));

        var mouse = {x: 0, y: 0};
        var last_mouse = {x: 0, y: 0};

        /* Mouse Capturing Work */
        canvas.addEventListener('mousemove', function(e) {
            last_mouse.x = mouse.x;
            last_mouse.y = mouse.y;

            mouse.x = e.pageX - this.offsetLeft;
            mouse.y = e.pageY - this.offsetTop;
        }, false);


        /* Drawing on Paint App */
        ctx.lineWidth = this.props.size;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        ctx.strokeStyle = this.props.color;

        canvas.addEventListener('mousedown', function(e) {
            canvas.addEventListener('mousemove', onPaint, false);
        }, false);

        canvas.addEventListener('mouseup', function() {
            canvas.removeEventListener('mousemove', onPaint, false);
        }, false);

        var root = this;
        var onPaint = function() {
            ctx.beginPath();
            ctx.moveTo(last_mouse.x, last_mouse.y);
            ctx.lineTo(mouse.x, mouse.y);
            ctx.closePath();
            ctx.stroke();

            if(root.timeout != undefined) clearTimeout(root.timeout);
            root.timeout = setTimeout(function(){
                var base64ImageData = canvas.toDataURL("image/png");
                root.socket.emit("canvas-data", base64ImageData);
            }, 1000)
        };
    }

    render() {
    
        return (
            
            <div className="container">
            <div className="tools-section">
                <div className="color-picker-container">
                    Select Brush Color : &nbsp; 
                    <input type="color" value={this.state.color} onChange={this.changeColor.bind(this)}/>
                </div>

                <div className="brushsize-container">
                    Select Brush Size : &nbsp; 
                    <select value={this.state.size} onChange={this.changeSize.bind(this)}>
                        <option> 5 </option>
                        <option> 10 </option>
                        <option> 15 </option>
                        <option> 20 </option>
                        <option> 25 </option>
                        <option> 30 </option>
                    </select>
                </div>

            </div>
    
            <div className="board-container">
                
                
            
                <h4>Select picture!</h4>
            
                    
                        {this.state.userData.map(image => (
                            <div className="dragImg"><img id={"gif"+this.state.id++} className="img" src={image.picture} width='200px' height='100px'/></div>
                            
                        ))}
            
                            
                <div id="dropHere"><canvas className="board" id="board" color={this.state.color} size={this.state.size}></canvas></div>
                
                <button onClick={()=>this.clickMe()}>Click me</button>                            

        
            </div>
        </div>

                    
           
        );
    }

    
}



export default Container

标签： javascriptreactjssocketssocket.io