## Getting started with Node.js [![license](http://img.shields.io/badge/license-BSD3-brightgreen.svg?style=flat)](https://github.com/Tencent/VasSonic/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/Tencent/VasSonic/pulls) [![wiki](https://img.shields.io/badge/Wiki-open-brightgreen.svg)](https://github.com/Tencent/VasSonic/wiki) --- ## How to use for Server ### Dependencies 1)Node Version > 7.0 2)install **sonic_differ** module ```Node.js npm install sonic_differ --save ``` 3)import **sonic_differ** module ```Node.js const differ = require('sonic_differ'); ``` ### Intercept and process data from server in Sonic mode. 1)First, create a Sonic cache struct like following code. ```Node.js let sonic = { buffer: [], write: function (chunk, encoding) { let buffer = chunk; let ecode = encoding || 'utf8'; if (!Buffer.isBuffer(chunk)) { buffer = new Buffer(chunk, ecode); } sonic.buffer.push(buffer); } }; ``` 2)Second, Intercept the data from server and use `sonic_differ` module to process ```Node.js response.on('data', (chunk, encoding) => { sonic.write(chunk, encoding) }); response.on('end', () => { let result = differ(ctx, Buffer.concat(sonic.buffer)); sonic.buffer = []; if (result.cache) { //304 Not Modified, return nothing. return '' } else { //other Sonic status. return result.data } }); ``` ## How to use for front-end Here is a simple demo shows how to use Sonic for front-end. ```Html demo // step 1: specify template and data by inserting different comment anchor.

here is the data

data3
// step 2: Receives diff data from mobile client through Javascript interface. ``` ### Step 1: Specify template and data by inserting different comment anchor. The data will be wrapped with anchor `````` ``````. The other part of html is template. ```Html

here is the data

data3
``` ### Step 2: Receives diff data from mobile client through JavaScript interface. The JavaScript interface of demo was involved when websites are finish. But the time when inferface was involved is not immutable, websites can decide whenever they want. ```Html ``` ### Step 3: Handle different status received from mobile client. The demo shows how to find and replace the data of specified anchor according to the diff data come from mobile client, then the website is updated. ```Html //step 3 Handle the response from mobile client which include Sonic response code and diff data. function getDiffDataCallback(result){ } //step 3 Handle the response from mobile client which include Sonic response code and diff data. function handleSonicDiffData(sonicStatus, sonicUpdateData){ } ``` ## Support Any problem? 1. Learn more from [sample](https://github.com/Tencent/VasSonic/tree/master/sonic-nodejs). 2. Contact us for help. ## License VasSonic is under the BSD license. See the [LICENSE](https://github.com/Tencent/VasSonic/blob/master/LICENSE) file for details. [1]: https://github.com/Tencent/VasSonic/blob/master/article/20170705120005424.gif [2]: https://github.com/Tencent/VasSonic/blob/master/article/20170705120029897.gif