Winglang实战：使用React+Vite构建WebSocket实时计数器应用

Winglang实战：使用React+Vite构建WebSocket实时计数器应用

wing The Wing Programming Language 项目地址: https://gitcode.com/gh_mirrors/wi/wing

前言

在现代Web应用开发中，实时数据同步是一个常见需求。本文将介绍如何使用Winglang（一种新兴的云编程语言）结合React和Vite，构建一个支持多客户端实时同步的计数器应用。我们将从零开始，逐步实现前后端分离架构，并最终部署到AWS云平台。

项目概述

我们将构建一个具有以下特性的应用：

• 前端：使用React+Vite构建响应式界面
• 后端：使用Winglang实现云服务
• 实时同步：通过WebSocket实现多客户端计数器同步
• 云部署：最终部署到AWS云平台

环境准备

在开始之前，请确保已安装以下工具：

• Node.js v20或更高版本
• Winglang最新版本（可通过npm install -g winglang安装）
• 推荐使用VSCode或IntelliJ作为开发环境

第一步：项目初始化

创建前端项目

首先创建项目目录并初始化React应用：

mkdir ~/shared-counter
cd ~/shared-counter
npm create -y vite frontend -- --template react-ts

进入前端目录安装依赖并测试运行：

cd frontend
npm install
npm run dev

此时你应该能在浏览器中看到默认的React欢迎页面。

创建后端项目

返回项目根目录，创建后端目录并初始化Wing项目：

cd ~/shared-counter
mkdir backend
cd backend
wing new empty

运行Wing模拟器验证项目：

wing it

模拟器会展示一个简单的"hello world"函数。

第二步：集成Vite开发服务器

安装Vite集成包

Wing提供了专门的Vite集成包：

cd ~/shared-counter/backend
npm i @winglibs/vite

修改backend/main.w文件：

bring vite;

new vite.Vite(
  root: "../frontend"
);

再次运行wing it，现在你将同时看到Wing模拟器和Vite开发服务器。

前后端数据通信

Wing提供了publicEnv机制向前端传递静态数据：

new vite.Vite(
  root: "../frontend",
  publicEnv: {
    TITLE: "Wing + Vite + React"
  }
);

前端可以通过window.wing.env访问这些变量。在frontend/src/App.tsx中添加：

import "../.winglibs/wing-env.d.ts"

然后修改标题显示：

<h1>{window.wing.env.TITLE}</h1>

第三步：实现计数器功能

创建后端API

在backend/main.w中添加API和计数器：

bring cloud;

let api = new cloud.Api(cors: true);
let counter = new cloud.Counter();

api.get("/counter", inflight () => {
  return {
    body: "{counter.peek()}"
  };
});

api.post("/counter", inflight () => {
  let prev = counter.inc();
  return {
    body: "{prev + 1}"
  };
});

将API URL传递给前端：

new vite.Vite(
  // ...
  publicEnv: {
    API_URL: api.url
  }
);

修改前端交互逻辑

在frontend/src/App.tsx中实现与后端的交互：

const API_URL = window.wing.env.API_URL;
const [count, setCount] = useState("NA");

const incrementCount = async () => {
  const response = await fetch(`${API_URL}/counter`, {
    method: "POST"
  });
  setCount(await response.text()); 
};

const updateCount = async () => {
  const response = await fetch(`${API_URL}/counter`);
  setCount(await response.text()); 
};

useEffect(() => {
  updateCount();
}, []);

// 修改按钮点击事件
<button key={count} onClick={incrementCount}>

第四步：实现实时同步

创建WebSocket广播服务

安装WebSocket集成包：

cd ~/shared-counter/backend
npm i @winglibs/websockets

创建backend/broadcaster.w文件：

bring cloud;
bring websockets;

pub class Broadcaster {
  pub url: str;
  server: websockets.WebSocket;
  clients: cloud.Bucket;

  new() {
    this.server = new websockets.WebSocket(name: "counter_updates");
    this.url = this.server.url;
    this.clients = new cloud.Bucket();
  
    this.server.onConnect(inflight(id: str): void => {
      this.clients.put(id, "");
    });

    this.server.onDisconnect(inflight(id: str): void => {
      this.clients.delete(id);
    });
  }

  pub inflight broadcast(message: str) {
    for id in this.clients.list() {
      this.server.sendMessage(id, message);
    }
  }
}

集成广播服务

修改backend/main.w：

bring "./broadcaster.w" as b;

let broadcaster = new b.Broadcaster();

// 在POST请求中添加广播
api.post("/counter", inflight () => {
  let prev = counter.inc();
  broadcaster.broadcast("refresh");
  return {
    body: "{prev + 1}"
  };
});

// 传递WebSocket URL给前端
new vite.Vite(
  publicEnv: {
    WS_URL: broadcaster.url
  }
);

前端监听WebSocket

安装WebSocket客户端库：

cd ~/shared-counter/frontend
npm i react-use-websocket

修改frontend/src/App.tsx：

import useWebSocket from 'react-use-websocket';

// 在App组件中添加
useWebSocket(window.wing.env.WS_URL, {
  onMessage: () => {
    updateCount();
  }
});

现在打开多个浏览器标签页，计数器的变化将实时同步到所有客户端。

第五步：部署到AWS

架构概览

部署后的架构将包含以下AWS服务：

• API Gateway：处理HTTP请求
• Lambda：执行业务逻辑
• DynamoDB：存储计数器状态
• WebSocket API：处理实时连接
• S3：托管前端静态文件

部署步骤

1. 编译为Terraform配置：

cd ~/shared-counter/backend
wing compile --platform tf-aws main.w

2. 使用Terraform部署：

cd ./target/main.tfaws
terraform init
terraform apply

部署过程可能需要几分钟时间。完成后，Terraform会输出应用的访问URL。

总结

通过本教程，我们实现了一个完整的云原生应用，具有以下特点：

1. 使用Winglang简化了云资源管理
2. 前后端完全分离的开发体验
3. 基于WebSocket的实时数据同步
4. 一键部署到AWS云平台

Winglang的这种开发模式特别适合需要快速原型开发和部署的场景，开发者可以专注于业务逻辑而不用过多操心底层云资源的管理。

wing The Wing Programming Language 项目地址: https://gitcode.com/gh_mirrors/wi/wing