使用socket.io简单实现多客户端可编辑表格-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用socket.io简单实现多客户端可编辑表格。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

之前看了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连接就建立好了；
然后我们在根据数据类型简单生成一个表格：文章来源地址https://www.toymoban.com/news/detail-455517.html

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</<