Get started with SRCS WebSocket API

# .env.local (Next.js) or .env (React)
NEXT_PUBLIC_WS_BASE_URL=ws://localhost:8000

import { useState } from 'react'

/**
 * Custom hook for roll cutting optimization via WebSocket
 * Manages loading state and WebSocket connection
 */
export const useOptimization = () => {
  const [loading, setLoading] = useState(false)

  /**
   * Sends roll cutting data to WebSocket server for optimization
   * @param {Object} data - Roll cutting specifications
   * @returns {Promise} - Resolves with optimization results
   */
  const optimize = async (data) => {
    setLoading(true)
    
    // Connect to WebSocket server
    const ws = new WebSocket(
      process.env.NEXT_PUBLIC_WS_BASE_URL
    )
    
    return new Promise((resolve, reject) => {
      // Send data when connection opens
      ws.onopen = () => ws.send(JSON.stringify(data))
      
      // Handle server response
      ws.onmessage = (event) => {
        const result = JSON.parse(event.data)
        if (result.status) {
          resolve(result.data)
        } else {
          reject(new Error(result.message))
        }
        ws.close()
        setLoading(false)
      }
      
      // Handle connection errors
      ws.onerror = () => {
        reject(new Error('Connection failed'))
        setLoading(false)
      }
    })
  }

  return { optimize, loading }
}

import { useOptimization } from './hooks/useOptimization'

/**
 * Component for roll cutting optimization form
 * Uses WebSocket to send data and receive results
 */
export default function OptimizeForm() {
  const { optimize, loading } = useOptimization()

  /**
   * Handles form submission and sends data for optimization
   * Creates sample roll cutting data and processes it
   */
  const handleSubmit = async () => {
    // Sample roll cutting data
    const data = {
      decal_size: 4500,      // Mother roll width in mm
      no_of_cut: 7,          // Maximum cuts per roll
      rolls: [
        {
          item_name: "Pattern 1",  // Product name
          size: 32,               // Cut size
          uom: "IN",              // Unit of measurement
          nor: 5,                 // Number of rolls required
          roll_id: "R1"           // Unique roll identifier
        }
      ]
    }

    try {
      const result = await optimize(data)
      console.log('Success:', result)
    } catch (error) {
      console.error('Error:', error)
    }
  }

  return (
    <button 
      onClick={handleSubmit} 
      disabled={loading}
    >
      {loading ? 'Optimizing...' : 'Optimize'}
    </button>
  )
}

// Install XLSX package
npm install xlsx

// Create hooks/useExcelUpload.js
import { useState } from 'react'

export const useExcelUpload = () => {
  const [loading, setLoading] = useState(false)

  const fileToBase64 = (file) => {
    return new Promise((resolve) => {
      const reader = new FileReader()
      reader.onload = () => {
        const bytes = new Uint8Array(reader.result)
        const base64 = btoa(String.fromCharCode(...bytes))
        resolve(base64)
      }
      reader.readAsArrayBuffer(file)
    })
  }

  const optimizeFromFile = async (file, formData) => {
    setLoading(true)
    const fileBase64 = await fileToBase64(file)
    
    const ws = new WebSocket(
      process.env.NEXT_PUBLIC_WS_BASE_URL + '/ws/optimize-cutting-from-file'
    )
    
    return new Promise((resolve, reject) => {
      ws.onopen = () => {
        ws.send(JSON.stringify({
          decal_size: parseFloat(formData.motherRollWidth),
          no_of_cut: parseInt(formData.maxCuts),
          file_content: fileBase64,
          filename: file.name,
          customer_name: formData.customerName,
          so_no: formData.soNo
        }))
      }
      
      ws.onmessage = (event) => {
        const result = JSON.parse(event.data)
        result.status ? resolve(result.data) : reject(result.message)
        ws.close()
        setLoading(false)
      }
      
      ws.onerror = () => {
        reject('Connection failed')
        setLoading(false)
      }
    })
  }

  return { optimizeFromFile, loading }
}