Synchronous.io:客户端和服务器之间共享的javascript对象

  • d4_475138
    了解作者
  • 176.6KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-08 05:01
    上传日期
同步 客户端和服务器之间共享JavaScript对象 : 实施者:( 动机 由于node.js在过去的两年中已成为各种Web应用程序的流行后端,因此开发人员已习惯于用一种语言: JavaScript编写其前端和后端。 当我们已经在使用一种编程语言时,为什么还要在客户端和服务器之间来回发送所有应用程序数据呢? 让我们共享对象。 这就是Synchronous.io的用途:它使您可以在后端和前端之间共享JavaScript对象。 它们是自动同步的,因此不必在意。 用法 在服务器端: var express = require ( 'express' ) ; var app = express ( ) ; var http = require ( 'http' ) . Server ( app ) ; var Synchronous = require ( 'Synchronous.i
Synchronous_io-master.zip
  • Synchronous.io-master
  • lib
  • client
  • synchronous.io.js
    9KB
  • synchronous.io.js
    9.2KB
  • demo
  • public
  • demo.css
    672B
  • icon.png
    12.8KB
  • demo-client.js
    1.4KB
  • demo.html
    1KB
  • demo.js
    1.1KB
  • LICENSE
    1KB
  • README.md
    5.5KB
  • DemoScreenshot.png
    201KB
  • .gitignore
    523B
  • index.js
    236B
  • package.json
    782B
内容介绍
# Synchronous.io <img src="https://raw.githubusercontent.com/koogle/Synchronous.io/master/demo/public/icon.png" width="100" alt="Synchronous Logo"> Shared JavaScript objects between client and server Idea by: [Danijar Hafner](https://github.com/danijar) Implementation by: [Jakob Frick](https://github.com/koogle) ### Motivation Since **node.js** has become a popular backend for all sorts of web applications over the last couple of years developers are getting used to write their frontend and their backend in one language: _JavaScript_. When we are already using one programming language why do we still have to send all of our app data back and forth between client and server? Let's have **shared objects**. This is what Synchronous.io is for: it allows you to have shared JavaScript objects between backend and frontend. They are synchronized automatically so don't have to care about that. ### Usage On the Server side: ```javascript var express = require('express'); var app = express(); var http = require('http').Server(app); var Synchronous = require('Synchronous.io'); var syn = new Synchronous(app, http); ``` Now `syn` has all the functions to access shared spaces like `globalspace()`, `namespace(name)` or `clientspace(clientId)` (Detailed later on). On the client side: Add this at the bottom of your HTML: ```HTML <script src="/socket.io/socket.io.js"></script> <script src="/synchronous.io/synchronous.io.js"></script> ``` and to get a similiar `syn` object just do the following: ```javascript (new Synchronous(io)).whenInit().then(function (syn) { ... } ``` Because the client needs to be registerd at the server the return value of `whenInit()` is a [Promise](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise). ### Sample Checkout the contents of the _demo_ folder to see how to setup a simple multi user file edtior in about 50 lines of JavaScript. ![](https://raw.githubusercontent.com/koogle/Synchronous.io/master/DemoScreenshot.png) _But wait there is more ..._ ### Build with Socket.io and ES7 Sychronous.io is build with **io.js** and the awesome work of [Socket.io](http://socket.io/). At it's core it uses the new ES7 [Object.observe()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/observe) mechanism to recognize and transfer changes to the shared objects. ``` --------------------------------------------------------------------- | Client JS - Shared space - Server JS | --------------------------------------------------------------------- | Synchronous.io | --------------------------------------------------------------------- | Socket.io | --------------------------------------------------------------------- | Browser JS engine | | Node.js | --------------------- --------------------- | Client | | Server | --------------------- --------------------- ``` ### Features ###### Globalspace Via the `globalspace()` function on server and client side a shared global space for Javascript objects can be accessed. ###### Namespace Via the `namespace(name)` function on server and client side a shared namespaces can be accessed. Namespace changes are only published to clients subscribed to this namespace. Furhtermore a client is updated when he accesses a namespace. Via reference counting it is determined when a namespace is deleted. ###### Clientspaces Via the `clientspace(clientId)` function on server side a shared space between the server and a client which is exclusive to the client can be accessed. The counterpart on the client is the `personalspace()` function. ###### Hooks Via the `setHook(name, function)` and `unsetHook(name)` functions a hook can be set on property of a shared object. This hook is then called as soon as the value of the property changes. ```javascript synObj.connectToNamespace(newRoomName).then(function (n) { ... n.space.setHook('content', function (newContent) { document.querySelector('#roomcontent').value = newContent; }); ... }); ``` ###### Readonly Via the `setNamespaceReadonly(name, readonly, silent)` and `setGlobalspaceReadonly(readonly, silent)` functions the server can make _namespaces_ and the _globalspace_ readonly. Then changes by the clients are not accepted. If `silent` is `true` then the clients are not notifed about the readonly change. ### Requirements * _node.js_/_io.js_ * [express](https://github.com/strongloop/express) * [Socket.io](http://socket.io/) ### Outlook/Todos * **Bugfixing** * Support other node webservers than _express.js_ * ACLs for namespaces and per user basis * Allow patch changes * Sent only delta changes * _Improve performance_ ## tl;dr Server: ```javascript var sync = new Sync(app, http); sync.globalspace().testValue = 'Hello'; ``` Client: ```javascript (new Synchronous(io)).whenInit().then(function (syn) { syn.globalspace().testValue += ' World'; } ``` Server: ```javascript console.log(syn.globalspace().testValue); >>>'Hello World' ``` Client: ```javascript console.log(syn.globalspace().testValue); >>>'Hello World' ``` (And of course for every furhter client ...) > Server: > ```javascript console.log(syn.globalspace().testValue); >>>>'Hello World World World ...' ``` >Client: >```javascript console.log(syn.globalspace().testValue); >>>>'Hello World World World ...' ``` ### Contribution Pull requests are always welcome :)
评论
    相关推荐
    • pifront:树莓派管理 node.js 前端
      前线 树莓派管理 node.js 前端
    • groceries-backend:支持Node.js前端的基本Node.js项目
      杂货后端 带有MongoDB的基本Node.js项目,可支持Groceries前端
    • node.js开发指南
      本书首先简要介绍Node.js,然后通过各种示例讲解Node.js 的基本特性,再用...本书面向对Node.js 感兴趣,但没有基础的读者,也可供已了解Node.js,并对Web 前端/ 后端开发有一定经验,同时想尝试新技术的开发者参考。
    • SSNoC-Node:芯片项目上可生存社交网络的 Node.js 前端接口项目
      前端包括 html5、css 和 javascript 代码,以支持平台无关的重新渲染。 后端包括 Node.js 和 Socket.io,以支持 http 请求/响应处理和实时特性。 安装 Install Node.js from http://nodejs.org/ git clone ...
    • 深浅node.js.rar
      学习node.js 前端 深入浅出 Node.js (一):什么是 Node.js 深入浅出 Node.js (二): Node.js&NPM; 的安装与配置 深入浅出 Node.js (三):深入 Node.js 的模块机制 深入浅出 Node.js (四): Node.js 的事件...
    • Node.js-如何通过饿了么Node.js面试
      Hi, 欢迎来到 ElemeFE, 如标题所示本教程的目的是教你如何通过饿了么大前端的面试, 职位是 2~3 年经验的 Node.js 服务端程序员, 如果你对这个职位感兴趣或者学习 Node.js 一些进阶的内容, 那么欢迎阅读.
    • Node.js-LiveNode.js超简单的前端跨域前后端分离解决方案
      LiveNode是一个基于Node.js轻巧的web服务,帮助前端开发者解决本地跨域,代码刷新,以及SPA(单页应用)前后端服务分离,并且可以用于生产环境项目部署
    • PinFE:Node.js中的弹球前端
      PinFE 该项目是基于VisualPinball的虚拟弹球柜的Node.js前端。 它仍处于早期开发阶段,尚未发布任何版本。
    • node.js开发指南
      本书首先简要介绍Node.js,然后通过各种示例讲解Node.js 的基本特性,再用...本书面向对Node.js 感兴趣,但没有基础的读者,也可供已了解Node.js,并对Web 前端/ 后端开发有一定经验,同时想尝试新技术的开发者参考。
    • spring-node.js:使用 Node.js 作为前端的 Spring 应用程序
      spring-node.js 使用 Node.js 作为前端的 Spring 应用程序