Разработка системы управления расписанием с использованием WebSockets и Vue.js

В современном веб-разработке все чаще применяются технологии реального времени, позволяющие обновлять данные без необходимости перезагрузки страницы. Одним из эффективных инструментов для таких задач является WebSockets. В данной статье мы рассмотрим, как создать систему управления расписанием с использованием WebSockets на Python и фронтенда на Vue.js.

Серверная часть на Python

Для реализации сервера WebSockets мы используем библиотеку websockets и asyncio. Сервер хранит список занятий и управляет подключениями клиентов. При добавлении, изменении или удалении занятий информация мгновенно отправляется всем подключенным клиентам.

Код сервера (server.py):

import websockets
import asyncio
import json

schedules = [
    {'id': 1, 'subject': 'Математика', 'time': '09:00'},
    {'id': 2, 'subject': 'Физика', 'time': '10:30'},
]

clients = set()

async def handler(websocket):
    global schedules
    clients.add(websocket)
    try:
        await websocket.send(json.dumps({"action": "init", "schedules": schedules}))
        async for message in websocket:
            data = json.loads(message)

            if data["action"] == "add":
                new_id = max([s["id"] for s in schedules] or [0]) + 1
                new_schedule = {"id": new_id, "subject": data["subject"], "time": data["time"]}
                schedules.append(new_schedule)

            elif data["action"] == "update":
                for s in schedules:
                    if s["id"] == data["id"]:
                        s["subject"] = data["subject"]
                        s["time"] = data["time"]

            elif data["action"] == "delete":
                schedules = [s for s in schedules if s["id"] != data["id"]]

            response = json.dumps({"action": "update", "schedules": schedules})
            await asyncio.gather(*(client.send(response) for client in clients))
    except websockets.ConnectionClosed:
        pass
    finally:
        clients.remove(websocket)

async def main():
    server = await websockets.serve(handler, 'localhost', 8765)
    print('Websockets-сервер запущен')
    await server.wait_closed()

asyncio.run(main())

Этот сервер:

• Принимает новые подключения и отправляет актуальное расписание.
• Обрабатывает события добавления, обновления и удаления занятий.
• Оповещает всех подключенных клиентов о изменениях.

Фронтенд на Vue.js

Теперь создадим интерфейс для редактирования расписания с использованием Vue.js. Приложение подключается к серверу WebSockets и динамически обновляет данные.

Код компонента Vue:

<template>
  <div>
    <h1>Редактирование расписания</h1>
    <form @submit.prevent="saveSchedule">
      <div v-for="schedule in schedules" :key="schedule.id">
        <input v-model="schedule.subject" placeholder="Название предмета" />
        <input v-model="schedule.time" placeholder="Время (например, 10:00)" />
        <button type="button" @click="deleteLesson(schedule.id)">Удалить</button>
      </div>
      <button type="button" @click="addLesson">Добавить урок</button>
      <button type="submit">Сохранить</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      schedules: [],
      socket: null
    };
  },
  created(){
    this.socket = new WebSocket("ws://localhost:8765");
    this.socket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if(data.action == 'init' || data.action == 'update'){
        this.schedules = data.schedules;
      }
    };
  },
  methods: {
    addLesson() {
      this.schedules.push({ id: Date.now(), subject: '', time: '' });
    },
    deleteLesson(id) {
      this.socket.send(JSON.stringify({ action: 'delete', id }));
    },
    saveSchedule() {
      this.schedules.forEach(schedule => {
        this.socket.send(JSON.stringify({ action: 'update', ...schedule }));
      });
    }
  }
};
</script>

Как это работает?

1. При загрузке страницы клиент подключается к WebSocket-серверу.
2. Получает актуальный список занятий.
3. Позволяет добавлять, изменять и удалять занятия.
4. Изменения автоматически синхронизируются между всеми пользователями.

Запуск проекта

1. Установите зависимости Python: pip install websockets.
2. Запустите сервер командой: python server.py.
3. Разместите Vue-код в файле App.vue и откройте страницу в браузере.

Заключение

Использование WebSockets в сочетании с Vue.js позволяет создать удобные и динамичные веб-приложения, работающие в режиме реального времени. Этот подход отлично подходит для расписаний, чатов, уведомлений и других интерактивных решений.