当前位置：首页 > news >正文

多终端支持！PC+移动端越南体育直播系统源码解析

news 来源：原创 2025/6/11 4:48:20

一、项目概述

随着体育赛事在越南的日益流行，开发一个支持多终端访问的体育直播系统变得尤为重要。本文将介绍一个完整的PC端和移动端兼容的越南体育直播系统源码，该系统能够满足不同设备用户的观赛需求。

二、系统架构设计

2.1 技术栈选择

前端：Vue.js + Element UI (PC端) + Vant (移动端)
后端：Node.js + Express
数据库：MongoDB
视频流：HLS协议 + FFmpeg转码
实时通讯：Socket.IO

2.2 多终端适配方案

javascript

复制

// 设备检测中间件
const detectDevice = (req, res, next) => {
  const userAgent = req.headers['user-agent'];
  req.isMobile = /mobile|android|iphone|ipad|phone/i.test(userAgent);
  next();
};

app.use(detectDevice);

三、核心功能实现

3.1 直播流处理

javascript

复制

// FFmpeg转码命令
const ffmpegCommand = ffmpeg(inputStream)
  .outputOptions([
    '-c:v libx264',
    '-preset veryfast',
    '-g 30',
    '-sc_threshold 0',
    '-f hls',
    '-hls_time 2',
    '-hls_list_size 6',
    '-hls_flags delete_segments'
  ])
  .output(`${outputPath}/playlist.m3u8`);

3.2 多终端界面适配

vue

复制

<template>
  <div :class="{'mobile-layout': isMobile, 'pc-layout': !isMobile}">
    <video-player :src="videoUrl" :isMobile="isMobile" />
    <chat-room v-if="!isMobile" />
    <mobile-chat-room v-else />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMobile: false
    }
  },
  mounted() {
    this.checkDevice();
    window.addEventListener('resize', this.checkDevice);
  },
  methods: {
    checkDevice() {
      this.isMobile = window.innerWidth < 768;
    }
  }
}
</script>

四、数据库设计

4.1 主要集合结构

javascript

复制

// 比赛信息
const matchSchema = new mongoose.Schema({
  title: String,
  description: String,
  startTime: Date,
  endTime: Date,
  teams: [{
    name: String,
    logo: String,
    score: Number
  }],
  streamUrl: String,
  status: { type: String, enum: ['upcoming', 'live', 'finished'] },
  categories: [String] // 如: football, volleyball等
});

// 用户收藏
const favoriteSchema = new mongoose.Schema({
  userId: mongoose.Types.ObjectId,
  matchId: mongoose.Types.ObjectId,
  createdAt: { type: Date, default: Date.now }
});

五、特色功能实现

5.1 多语言支持（越南语+英语）

javascript

复制

// 语言配置文件
const locales = {
  vi: {
    live: 'Trực tiếp',
    upcoming: 'Sắp diễn ra',
    finished: 'Đã kết thúc'
  },
  en: {
    live: 'Live',
    upcoming: 'Upcoming',
    finished: 'Finished'
  }
};

// 语言切换组件
function changeLanguage(lang) {
  localStorage.setItem('preferredLanguage', lang);
  i18n.locale = lang;
}

5.2 实时聊天互动

javascript

复制

// Socket.IO实时聊天
io.on('connection', (socket) => {
  socket.on('join-room', (roomId) => {
    socket.join(roomId);
  });
  
  socket.on('send-message', ({roomId, message, user}) => {
    io.to(roomId).emit('new-message', {message, user});
  });
  
  socket.on('disconnect', () => {
    // 清理逻辑
  });
});

六、性能优化

6.1 自适应码率

javascript

复制

// 根据网络状况调整码率
function adjustBitrate() {
  const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
  
  if (connection) {
    const { effectiveType, downlink } = connection;
    if (effectiveType === '4g' && downlink > 3) {
      selectHighBitrate();
    } else {
      selectLowBitrate();
    }
  }
}

6.2 离线缓存策略

javascript

复制

// Service Worker缓存策略
self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('/api/')) {
    event.respondWith(
      networkFirstThenCache(event.request)
    );
  } else {
    event.respondWith(
      cacheFirstThenNetwork(event.request)
    );
  }
});

七、部署方案

7.1 服务器配置建议

前端：Nginx静态文件服务 + 负载均衡
后端：PM2进程管理 + 集群模式
媒体服务器：Nginx-RTMP模块或专业媒体服务器

7.2 CI/CD流程

yaml

复制

# GitHub Actions示例
name: Deploy to Production

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run build
      - run: scp -r dist/* user@server:/var/www/html

八、源码结构说明

复制

/vietnam-sports-live
├── /client               # 前端代码
│   ├── /pc               # PC端界面
│   ├── /mobile           # 移动端界面
│   └── /shared           # 共享组件和逻辑
├── /server               # 后端代码
│   ├── /controllers      # 业务逻辑
│   ├── /models           # 数据模型
│   ├── /routes           # API路由
│   └── /services         # 第三方服务集成
├── /media-server         # 流媒体处理
└── /docs                 # 文档