使用socket.io简单实现多客户端可编辑表格

最新推荐文章于 2023-07-16 15:45:18 发布

VIP文章向歌啊

最新推荐文章于 2023-07-16 15:45:18 发布

阅读量413

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_46186155/article/details/130816683

版权

简单实现多客户端可编辑表格

之前看了B站小野森森老师的可编辑表格的视频深受启发，今天使用React简单实现一下。

需求

当处于编辑状态的时候，自己和其他人可以看到；
编辑内容后，自己及其他人可以同步看到修改后的内容；

前置准备

后端服务，使用socket.io起一个后端服务，用于监听连接和发送数据；

const {
    Server } = require('socket.io');

const data = [
  {
   
    id: 1,
    name: 'zhangsan',
    age: 10,
    score: 100,
  },
  {
   
    id: 2,
    name: 'zhangsan1',
    age: 10,
    score: 100,
  },
  {
   
    id: 3,
    name: 'zhangsan2',
    age: 10,
    score: 100,
  },
]

const io = new Server(3001, {
   
  cors: ['http://localhost:3000'],
});

io.on('connect', (socket) => {
   
  console.log('客户端 connected');
  socket.emit('loadData', data);
});

前端准备：使用socket.io-client建立与服务端的连接：

import {
    io } from 'socket.io-client';

useEffect(() => {
   
  const socket = io('http://localhost:3001');

  socket.on('loadData', (data) => {
   
    console.log(data);
  })
}, []);

这样，一个简单的socket.io连接就建立好了；
然后我们在根据数据类型简单生成一个表格：

import React, {
    useEffect, useState } from 'react';
import {
    io } from 'socket.io-client';
import './App.css';


interface IData {
   
  id: number;
  name: string;
  age: number;
  score: number;
}


function App() {
   
  const [dataList, setDataList] = useState<IData[]>([]);


  useEffect(() => {
   
    const socket = io('http://localhost:3001');


    socket.on('loadData', (data) => {
   
      setDataList(data);
    })
  }, []);
  return (
    <div className="App">
      <table
        style={
   {
    margin: '0 auto', border: '1', width: '300px', marginTop: '100px' }}
        >
        <thead>
          <tr>
            <th>ID</th>
            <th>name</<