Nodejs与百度的实时框架 Cloudajs

Nodejs与百度的实时框架 Cloudajs

刚才进BAE首页时看到不小的变化, 包括bae3.0公测及Cloudajs的推广.

似乎也就是之前公布的朦朦胧胧的 sumeru

cloudajs的特点:

云端统一

只用Javascript一门语言，抹平云端界限，一份代码处处运行。

实时编程

所有数据实时推送的基础设置，每个终端都无延迟同步响应。

随动反馈

面向数据的编程模型，数据实时推送后，界面会自动更新。

一键托管

无缝整合百度BAE云环境，即可自建服务器也可一键托管在百度云。

专为移动 为智能手机与平板电脑特别设计，运行性能高，标配离线能力。

高兼容性

标配数据同步工具，兼容已有服务；同时兼容Backbone等开源框架。

SEO能力

原厂匹配主流搜索引擎，每个APP场景都可以被搜索引擎爬虫抓取。

入门简单

简单语法搭配丰富教程与文档，保证快速上手，还配有5分钟教程。

(meteor既视感好强烈…)

项目地址:

cloudajs

cloudajs文档

github地址


8 回复

Node.js与百度的实时框架 Cloudajs

引言

最近访问BAE首页时，注意到一些显著的变化，包括BAE 3.0的公测以及对Cloudajs的推广。这看起来像是之前提到过的朦胧的Sumeru项目。

Cloudajs的特点

云端统一

  • 描述：使用单一的JavaScript语言，打破了云端之间的界限，使得同一份代码可以在任何地方运行。
  • 示例：
// 示例代码：在客户端和服务端使用相同的逻辑处理数据
const express = require('express');
const app = express();

app.get('/data', (req, res) => {
    res.json({ message: 'Hello from server!' });
});

// 客户端代码
fetch('/data')
    .then(response => response.json())
    .then(data => console.log(data.message));

实时编程

  • 描述：提供基础设置以支持所有数据的实时推送，确保每个终端都能即时响应。
  • 示例：
// 使用WebSocket实现数据实时推送
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
    ws.on('message', message => {
        console.log(`Received: ${message}`);
        // 将消息广播给所有连接的客户端
        wss.clients.forEach(client => {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
});

随动反馈

  • 描述：采用面向数据的编程模型，当数据被实时推送后，界面将自动更新。
  • 示例：
// 使用React和WebSocket实现数据驱动的UI更新
import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

function App() {
    const [message, setMessage] = useState('');

    useEffect(() => {
        const socket = io('http://localhost:8080');
        socket.on('message', data => {
            setMessage(data);
        });
    }, []);

    return (
        <div>
            <h1>{message}</h1>
        </div>
    );
}

一键托管

  • 描述：无缝集成到百度BAE云环境中，可以自建服务器或直接托管在百度云上。
  • 示例：
// 部署到BAE云环境
// 可以通过BAE提供的工具或命令行接口进行部署

高兼容性

  • 描述：配备标准的数据同步工具，并且兼容现有的服务和开源框架（如Backbone）。
  • 示例：
// 使用Backbone.js和Cloudajs结合
const Backbone = require('backbone');
const { Model, Collection } = require('cloudajs');

class MyModel extends Backbone.Model {
    urlRoot = '/api/my-model';
}

class MyCollection extends Backbone.Collection {
    model = MyModel;
    url = '/api/my-collection';
}

const myModel = new MyModel();
myModel.fetch().then(model => console.log(model.toJSON()));

SEO能力

  • 描述：与主流搜索引擎匹配，每个应用场景都能被搜索引擎爬虫抓取。
  • 示例：
// 使用Server-Side Rendering (SSR) 提升SEO效果
import express from 'express';
import { renderToString } from 'react-dom/server';
import App from './App';

const app = express();

app.get('/', (req, res) => {
    const html = renderToString(<App />);
    res.send(`
        <!DOCTYPE html>
        <html>
            <head>
                <title>My App</title>
            </head>
            <body>
                <div id="root">${html}</div>
                <script src="/bundle.js"></script>
            </body>
        </html>
    `);
});

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

入门简单

  • 描述：使用简单的语法，配合丰富的教程和文档，确保快速上手。
  • 示例：
// 一个简单的Cloudajs应用
const { Application } = require('cloudajs');

const app = new Application({
    name: 'My App',
    version: '1.0.0'
});

app.start();

结论

Cloudajs为开发者提供了一种全新的、高效的开发方式，不仅简化了跨平台开发，而且增强了实时性和用户体验。如果你正在寻找一种能够简化开发流程并提高效率的框架，Cloudajs绝对值得一试。


有点意思～～～～～～～～～

在线demo的性能 好烂啊

电脑都卡爆了 发一信息

感觉还挺好的

百度的东西也敢用？

我觉得不卡，在框架的支持下建聊天室这么简单了，感觉跟以前安装软件下一步下一步一样了，然后就开始连上服务器聊上了，有意思！

Cloudajs 是百度推出的一个基于 Node.js 的实时框架，旨在简化开发流程，并提供丰富的功能。它允许开发者使用 JavaScript 进行全栈开发，从而实现云端统一、实时编程、随动反馈等功能。以下是关于如何使用 Cloudajs 框架的一些基本介绍和示例代码。

示例代码

假设我们要创建一个简单的聊天应用，其中客户端可以实时收到消息更新。

安装 Cloudajs

首先，你需要安装 Cloudajs 框架。可以通过 npm 安装：

npm install cloudajs

创建服务器端

接下来，创建一个简单的服务器文件 server.js：

const { Cloud } = require('cloudajs');

const cloud = new Cloud();

// 设置实时通道
cloud.onMessage((data) => {
  console.log("Received message: ", data);
  // 广播消息给所有连接的客户端
  cloud.broadcast(data);
});

cloud.start(8080);

创建客户端

然后，创建一个客户端文件 client.html：

<!DOCTYPE html>
<html>
<head>
  <title>Chat App</title>
</head>
<body>
  <input type="text" id="messageInput">
  <button onclick="sendMessage()">Send</button>
  <ul id="messages"></ul>

  <script src="https://cdn.cloudajs.org/cloudajs.min.js"></script>
  <script>
    const cloud = new Cloud();

    // 当连接到服务器时
    cloud.onConnect(() => {
      console.log('Connected to server');
    });

    // 接收消息
    cloud.onMessage((data) => {
      const messagesList = document.getElementById('messages');
      const li = document.createElement('li');
      li.textContent = data;
      messagesList.appendChild(li);
    });

    function sendMessage() {
      const input = document.getElementById('messageInput');
      cloud.send(input.value);
      input.value = '';
    }
  </script>
</body>
</html>

解释

  1. 服务器端 (server.js)：

    • 创建一个新的 Cloud 实例。
    • 监听消息事件并广播消息给所有连接的客户端。
    • 启动服务器监听端口 8080。

  2. 客户端 (client.html)：

    • 使用 Cloudajs 客户端库进行连接。
    • 当连接成功时打印一条消息。
    • 监听来自服务器的消息，并将消息添加到页面中的列表。
    • 发送按钮点击时，发送输入框中的内容到服务器。

这个简单的例子展示了如何使用 Cloudajs 框架进行实时通信。你可以在此基础上扩展更多的功能，例如用户身份验证、更复杂的前端样式等。

回到顶部