1. 多人共同編輯
協(xié)同編輯指在同一個文檔中，能夠與他人合作編寫，可以實時看到別人更改的內(nèi)容捅膘，他人也能觀察到自己修改的內(nèi)容求厕。
本文檔記錄了對該功能的簡單實現(xiàn)的學(xué)習(xí)與開發(fā)過程猩系。
2. 技術(shù)框架
-
Websocket 協(xié)議
WebSocket是HTML5新增的一種通信協(xié)議,其特點是服務(wù)端可以主動向客戶端推送信息，客戶端也可以主動向服務(wù)端發(fā)送信息昧穿，是真正的雙向平等對話凡壤，屬于服務(wù)器推送技術(shù)的一種署尤。在WebSocket API中蔬咬，瀏覽器和服務(wù)器只需要做一個握手的動作，然后瀏覽器和服務(wù)端之間就形成了一條快速通道沐寺，兩者之間就直接可以數(shù)據(jù)相互傳送林艘。</br> -
Socket.io 庫
socket.io是一個跨瀏覽器支持WebSocket的實時通訊的JS。
Socket.io支持及時混坞、雙向狐援、基于事件的交流，可在不同平臺究孕、瀏覽器啥酱、設(shè)備上工作，可靠性和速度穩(wěn)定厨诸。
Socket.io實際上是WebSocket的父集镶殷，Socket.io封裝了WebSocket和輪詢等方法，會根據(jù)情況選擇方法來進行通訊微酬。</br> -
NodeJS 環(huán)境
Node.js 是一個基于Chrome JavaScript 運行時建立的一個平臺绘趋。Node.js是一個事件驅(qū)動I/O服務(wù)端JavaScript環(huán)境，基于Google的V8引擎颗管，V8引擎執(zhí)行Javascript的速度非诚菡冢快，性能非常好垦江。
使用了基于 Node.JS 的 web 框架：express
3. 實現(xiàn)過程
-
3.1 編寫主頁面 index.html
- 提供一個選擇文件按鈕帽馋、一個保存按鈕以及文本編輯區(qū)域
<input id='selectfile' type='file' accept='text/plain' onchange='openFile(event)'> <textarea id='output' class="notifyDetail"></textarea> <button id='btn_save' type="submit">Save</button>-
使用 js實現(xiàn)簡單的功能
- 選擇文件
var openFile = function(event) { var input = event.target; var reader = new FileReader(); //創(chuàng)建一個fileReader對象 reader.readAsText(input.files[0]); //讀取文本內(nèi)容 reader.onload = function() { if(reader.result) { //顯示文件內(nèi)容 $("#output").html(reader.result); window.dynamicUpdate(reader.result); //更新文本 fileName = input.files[0].name; //保存文件名 } }; -
協(xié)同文本編輯
- 實時監(jiān)聽文本變化
$(document).on("input propertychange",".notifyDetail",function(){ window.dynamicUpdate(document.getElementById('output').value); });- 注冊更新文本的事件
function dynamicUpdate(text){ socket.emit('alter text', text); }- 廣播
io.on('connection',(socket) => { socket.on('alter text', (text) => { //console.log(text); io.emit('update text', text); }); });- 更新文本
socket.on('update text', function(text){ t.value = text; }) -
保存文件
$('#btn_save').click(function(){ var content = document.getElementById('output').value; //alert(content); //alert(fileName); if(fileName =='null'){ alert('null'); fileName = 'untitled.txt' } let downLink = document.createElement('a') downLink.download = fileName //字符內(nèi)容轉(zhuǎn)換為blod地址 let blob = new Blob([content]) downLink.href = URL.createObjectURL(blob) // 鏈接插入到頁面 document.body.appendChild(downLink) downLink.click() // 移除下載鏈接 document.body.removeChild(downLink) });
3.2 使用socket.io搭建server
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
http.listen(3000, () => {
console.log('listening on *:3000');
});
這段代碼作用如下：
1. Express 初始化 app 作為 HTTP 服務(wù)器的回調(diào)函數(shù)
2. 定義了一個路由 / 來處理首頁訪問
3. 使 http 服務(wù)器監(jiān)聽端口 3000
- 3.3 測試
此時在項目目錄下運行命令： node index.js 就可看到：
listen on 3000
在瀏覽器中訪問 http://localhost:3000 就可看到：
index.html
點擊 選擇文件 選擇要編輯的文本：
choose file
在本地開啟多個客戶端（瀏覽器）觀察 ：
multiple
測試編輯的實時更新：
test
保存文件，將編輯的文本下載到本地：
save
查看是否編輯成功：（看到追加在文本后的 --------）
check
4. 實驗總結(jié)
本次實驗比吭，通過學(xué)習(xí)WebSocket绽族，結(jié)合socket.io，基于web框架簡單實現(xiàn)了協(xié)同編輯文檔的功能衩藤，達到了實時通訊的效果吧慢。
但并沒有拓展別的功能，如字體設(shè)置慷彤、格式設(shè)置等（像其他在線文檔那樣的快捷功能）
