集成lite-server后Socket.io浏览器间操作同步实现求助

需求概述 #

你已经在Angular项目中集成了lite-server，并且用Socket.io开发页面，想要实现浏览器间操作同步——比如A浏览器滚动页面、输入表单内容时，其他打开同一页面的浏览器能实时同步这些操作。下面是针对你的现有配置给出的完整实现方案：

现有配置回顾 #

先确认下你当前的代码配置：

App模块配置

import { SocketIoModule, SocketIoConfig } from 'ng-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:3000', options: {} };

组件配置

import { SocketService } from '../../service/socket.service';
@Component({
  selector: 'dashboard-component',
  templateUrl: './dashboard.component.html',
  providers: [ SocketService ]
})

Lite-server启动命令

pm2 start lite-server

具体实现步骤 #

注意：Socket.io需要服务端配合，lite-server只是静态文件服务器，所以我们需要额外搭建一个简单的Node.js Socket.io服务端，同时调整lite-server的端口避免冲突。

1. 搭建Socket.io服务端

首先在项目根目录新建server.js文件，内容如下：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server, {
  cors: {
    origin: "http://localhost:3000", // 对应你的lite-server地址
    methods: ["GET", "POST"]
  }
});

// 监听客户端连接
io.on('connection', (socket) => {
  console.log('客户端已连接:', socket.id);

  // 转发滚动事件给其他客户端
  socket.on('scroll', (scrollData) => {
    socket.broadcast.emit('sync-scroll', scrollData);
  });

  // 转发表单输入事件给其他客户端
  socket.on('input-change', (inputData) => {
    socket.broadcast.emit('sync-input', inputData);
  });

  // 监听客户端断开连接
  socket.on('disconnect', () => {
    console.log('客户端已断开连接:', socket.id);
  });
});

// 启动服务，端口设为4000（避免和lite-server的3000冲突）
server.listen(4000, () => {
  console.log('Socket.io服务端运行在http://localhost:4000');
});

然后安装依赖：

npm install express socket.io cors --save-dev

用pm2启动服务端：

pm2 start server.js --name socket-server

2. 调整Angular的Socket.io配置

修改App模块中的配置，把服务端地址改成我们刚搭建的http://localhost:4000：

import { SocketIoModule, SocketIoConfig } from 'ng-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:4000', options: {} };

@NgModule({
  imports: [
    // ...其他模块
    SocketIoModule.forRoot(config)
  ]
})
export class AppModule { }

3. 完善SocketService封装

修改SocketService，封装发送和监听事件的方法：

import { Injectable } from '@angular/core';
import { Socket } from 'ng-socket-io';

@Injectable()
export class SocketService {
  constructor(private socket: Socket) { }

  // 发送滚动数据
  sendScrollData(data: { scrollTop: number }) {
    this.socket.emit('scroll', data);
  }

  // 监听滚动同步事件
  onSyncScroll() {
    return this.socket.fromEvent('sync-scroll');
  }

  // 发送表单输入数据
  sendInputData(data: { fieldName: string, value: string }) {
    this.socket.emit('input-change', data);
  }

  // 监听表单输入同步事件
  onSyncInput() {
    return this.socket.fromEvent('sync-input');
  }
}

4. 在组件中实现操作同步

以Dashboard组件为例，实现滚动和表单输入的同步：

import { Component, OnInit, HostListener } from '@angular/core';
import { SocketService } from '../../service/socket.service';

@Component({
  selector: 'dashboard-component',
  templateUrl: './dashboard.component.html',
  providers: [ SocketService ]
})
export class DashboardComponent implements OnInit {
  // 假设表单字段
  formData = {
    username: '',
    email: ''
  };

  // 标记是否是同步过来的操作，避免循环触发
  isSyncing = false;

  constructor(private socketService: SocketService) { }

  ngOnInit(): void {
    // 监听滚动同步
    this.socketService.onSyncScroll().subscribe((data: { scrollTop: number }) => {
      this.isSyncing = true;
      window.scrollTo(0, data.scrollTop);
      setTimeout(() => this.isSyncing = false, 100);
    });

    // 监听表单输入同步
    this.socketService.onSyncInput().subscribe((data: { fieldName: string, value: string }) => {
      this.isSyncing = true;
      this.formData[data.fieldName] = data.value;
      setTimeout(() => this.isSyncing = false, 100);
    });
  }

  // 监听页面滚动事件
  @HostListener('window:scroll', [])
  onWindowScroll() {
    if (!this.isSyncing) {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      this.socketService.sendScrollData({ scrollTop });
    }
  }

  // 表单输入事件处理
  onInputChange(fieldName: string, event: any) {
    if (!this.isSyncing) {
      const value = event.target.value;
      this.socketService.sendInputData({ fieldName, value });
    }
  }
}

对应的模板文件dashboard.component.html示例：

<div class="scroll-content" style="height: 2000px;">
  <input 
    type="text" 
    [(ngModel)]="formData.username" 
    (input)="onInputChange('username', $event)"
    placeholder="用户名"
  >
  <input 
    type="email" 
    [(ngModel)]="formData.email" 
    (input)="onInputChange('email', $event)"
    placeholder="邮箱"
  >
</div>

注意事项 #

• 确保Socket.io服务端和lite-server都正常运行，端口不冲突（示例中服务端用4000，lite-server用3000）
• 加入isSyncing标记是为了避免同步操作触发本地事件，造成循环发送
• 可以根据需求扩展其他操作的同步，比如按钮点击、复选框状态等，只需要新增对应的事件监听和发送逻辑即可

内容的提问来源于stack exchange，提问作者Deepak M