FeathersJS 快速入门指南：从零构建实时应用

成旭涛Strange

于 2025-06-02 09:16:04 发布

阅读量369

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00700/article/details/148377514

FeathersJS 快速入门指南：从零构建实时应用

feathers The API and real-time application framework 项目地址: https://gitcode.com/gh_mirrors/fe/feathers

前言

FeathersJS 是一个轻量级的 Node.js 框架，用于构建实时应用程序和 REST API。它基于 Express/Koa 构建，提供了简洁的服务架构和强大的实时功能。本文将带你从零开始，逐步构建一个完整的 Feathers 应用，包括 API 服务和前端界面。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

Node.js 最新稳定版本（建议使用 LTS 版本）
npm 包管理工具（通常随 Node.js 一起安装）

验证安装是否成功：

node --version
npm --version

项目初始化

首先创建一个新项目目录并初始化 npm 项目：

mkdir feathers-basics
cd feathers-basics
npm init --yes

对于 TypeScript 用户，还需要额外安装 TypeScript 相关依赖：

npm install typescript ts-node @types/node --save-dev
npx tsc --init --target es2020

安装 Feathers 核心库

安装 Feathers 核心模块：

npm install @feathersjs/feathers --save

Feathers 的所有核心模块都位于 @feathersjs 命名空间下。

创建第一个 Feathers 应用

让我们创建一个简单的消息服务，它可以创建新消息并返回所有现有消息。

基础服务实现

创建一个 app.ts（TypeScript）或 app.mjs（JavaScript）文件：

import { feathers } from '@feathersjs/feathers'

// 消息数据接口
interface Message {
  id?: number
  text: string
}

// 消息服务类
class MessageService {
  messages: Message[] = []

  async find() {
    return this.messages
  }

  async create(data: Pick<Message, 'text'>) {
    const message: Message = {
      id: this.messages.length,
      text: data.text
    }
    this.messages.push(message)
    return message
  }
}

// 服务类型定义
type ServiceTypes = {
  messages: MessageService
}

const app = feathers<ServiceTypes>()

// 注册消息服务
app.use('messages', new MessageService())

// 监听创建消息事件
app.service('messages').on('created', (message: Message) => {
  console.log('新消息已创建:', message)
})

// 主函数
const main = async () => {
  await app.service('messages').create({ text: '你好 Feathers' })
  await app.service('messages').create({ text: '再次问好' })
  const messages = await app.service('messages').find()
  console.log('所有消息:', messages)
}

main()

运行这个应用，你将看到控制台输出新创建的消息和所有消息列表。

构建 API 服务器

上面的例子只是一个简单的脚本，现在我们将它转换为一个完整的 API 服务器。

安装必要依赖

npm install @feathersjs/socketio @feathersjs/koa --save

服务器实现

更新你的应用文件，添加以下内容：

import { koa, rest, bodyParser, errorHandler, serveStatic } from '@feathersjs/koa'
import socketio from '@feathersjs/socketio'

// 创建 KoaJS 兼容的 Feathers 应用
const app = koa<ServiceTypes>(feathers())

// 静态文件服务
app.use(serveStatic('.'))
// 错误处理
app.use(errorHandler())
// 请求体解析
app.use(bodyParser())

// 配置 REST API
app.configure(rest())
// 配置 Socket.io 实时 API
app.configure(socketio())

// 注册消息服务
app.use('messages', new MessageService())

// 实时连接处理
app.on('connection', (connection) => app.channel('everybody').join(connection))
app.publish((_data) => app.channel('everybody'))

// 启动服务器
app.listen(3030)
  .then(() => console.log('Feathers 服务器已启动: http://localhost:3030'))

// 创建初始消息
app.service('messages').create({ text: '来自服务器的问候' })

启动服务器后，访问 http://localhost:3030/messages 可以看到服务器返回的 JSON 格式消息列表。

构建前端界面

Feathers 的一个强大特性是它可以在浏览器中运行，使用相同的 API 与服务端通信。

创建 index.html 文件：

<!DOCTYPE html>
<html>
<head>
  <title>Feathers 示例</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="p-8">
  <h1 class="text-3xl font-bold mb-4">欢迎使用 Feathers</h1>
  
  <form onsubmit="sendMessage(event)" class="mb-4">
    <input id="message-text" type="text" class="border p-2 mr-2" placeholder="输入消息">
    <button type="submit" class="bg-blue-500 text-white p-2">发送</button>
  </form>
  
  <h2 class="text-xl mb-2">消息列表</h2>
  <div id="messages"></div>

  <script src="//unpkg.com/@feathersjs/client@^5.0.0/dist/feathers.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io('http://localhost:3030')
    const app = feathers()
    
    app.configure(feathers.socketio(socket))
    
    async function sendMessage(event) {
      event.preventDefault()
      const input = document.getElementById('message-text')
      await app.service('messages').create({ text: input.value })
      input.value = ''
    }
    
    function addMessage(message) {
      const div = document.createElement('div')
      div.className = 'mb-2 p-2 bg-gray-100 rounded'
      div.textContent = message.text
      document.getElementById('messages').appendChild(div)
    }
    
    async function main() {
      const messages = await app.service('messages').find()
      messages.forEach(addMessage)
      app.service('messages').on('created', addMessage)
    }
    
    main()
  </script>
</body>
</html>

访问 http://localhost:3030 可以看到一个简单的消息界面，打开多个浏览器标签页可以实时看到消息同步。