Spaces:
Sleeping
Sleeping
| # web-editor  | |
| A WebSocket based text file synchronizer between disk and web browser. | |
| ## Installation | |
| ```bash | |
| npm install @k-l-lambda/web-editor --save | |
| ``` | |
| ## Usage | |
| * Backend example: | |
| ```javascript | |
| import http from "http"; | |
| import * as webEditor from "@k-l-lambda/web-editor"; | |
| // setup a web socket server over HTTP | |
| const httpServer = http.createServer(); | |
| httpServer.listen("8080", "127.0.0.1", () => { | |
| console.log("WebEditor server is online."); | |
| }); | |
| webEditor.service.createServer(httpServer, {rootDir: "/my-assets-folder"}); | |
| ``` | |
| * Frontend example: | |
| ```javascript | |
| import * as webEditor from "@k-l-lambda/web-editor"; | |
| // assume you have a textarea with id 'my-textarea' in DOM | |
| const $textarea = document.querySelector("#my-textarea"); | |
| const remoteFile = new webEditor.RemoteFile(); | |
| remoteFile.on("sync", ({timestamp}) => { | |
| // receive change from disk | |
| $textarea.value = remoteFile.content; | |
| console.log("Disk change synchronized:", new Date(timestamp)); | |
| }); | |
| $textarea.onchange = () => { | |
| // send browser modification to disk | |
| remoteFile.content = $textarea.value; | |
| }; | |
| // assume you have a file '/my-assets-folder/my-text.txt' on disk | |
| remoteFile.connect("ws://127.0.0.1:8080", "my-text.txt"); | |
| ``` | |