Getting Started

前端已自动化部署，意思是：当Git仓库有新的 push，服务器会自动向Git仓库 pull 拉取代码并运行 npm i && npm run build。

Environment

请在 Vite + Vue 3 项目的根目录添加文件 .env.example，并添加以下环境变量：

VITE_API_URL=https://api.games.178t.com

VITE_PUSHER_APP_KEY='请向后端询问密钥'
VITE_PUSHER_HOST="reverb.178t.com"
VITE_PUSHER_PORT=443
VITE_PUSHER_SCHEME=https
VITE_PUSHER_APP_CLUSTER=mt1

Dependencies

此项目的前台和后台都会用到 WebSockets，请安装 laravel-echo 及 pusher-js。

npm install --save-dev laravel-echo pusher-js

使用示例：

import Echo from "laravel-echo"
import Pusher from "pusher-js"

window.Pusher = Pusher

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: import.meta.env.VITE_PUSHER_APP_KEY,
  cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
  wsHost: import.meta.env.VITE_PUSHER_HOST,
  wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
  wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
  forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
  enabledTransports: ['ws', 'wss'],
    
  authorizer: (channel, options) => {
    return {
      authorize: (socketId, callback) => {
        axios.post(`${import.meta.env.VITE_API_URL}/broadcasting/auth`, {
          socket_id: socketId,
          channel_name: channel.name
        }).then(response => {
          callback(null, response.data)
        }).catch(error => {
          callback(error)
        })
      }
    }
  }
})

HTTP Client

如果使用 axios 作为 HTTP Client，应添加以下配置：

axios.defaults.withCredentials = true;
axios.defaults.withXSRFToken = true;