仔細看一下我圈住的地方，從登錄人可以看出，這是我在兩個瀏覽器打開的頁面截圖。當然你們也可以直接去線上地址實際操作一下。兩個頁面，兩個畫板，兩個人都可以操作，各自的操作也會分別同步到對方的畫板上。右邊是一個簡單的聊天室，所有的數據同步以及聊天消息都是基於今天講的 RTCDataChannel 來做的。

建立連接

這次不需要視頻流，也不需要 Canvas 流，所以我們在點對點連接時直接建立數據通道。

createDataChannel() { // 創建 DataChannel
try{
this.channel = this.peer.createDataChannel(messagechannel);
this.handleChannel(this.channel);
} catch (e) {
console.log(createDataChannel:, e);
}
},
onDataChannel() { // 接收 DataChannel
this.peer.ondatachannel = (event) => {
// console.log(ondatachannel, event);
this.channel = event.channel;
this.handleChannel(this.channel);
};
},
handleChannel(channel) { // 處理 channel
channel.binaryType = arraybuffer;
channel.onopen = (event) => { // 連接成功
console.log(channel onopen, event);
this.isToPeer = true; // 連接成功
this.loading = false; // 解除 loading
this.initPalette();
};
channel.onclose = function(event) { // 連接關閉
console.log(channel onclose, event)
};
channel.onmessage = (e) => { // 收到消息
this.messageList.push(JSON.parse(e.data));
// console.log(channel onmessage, e.data);
};
}


分別在 呼叫端 和 接收端 創建 channel。部分代碼省略。

// 呼叫端
socket.on(reply, async data =>{ // 收到回復
this.loading = false;
switch (data.type) {
case 1: // 同意
this.isCall = data.self;
// 對方同意之後創建自己的 peer
await this.createP2P(data);
// 建立DataChannel
await this.createDataChannel();
// 並給對方發送 offer
this.createOffer(data);
break;
···
}
});
// 接收端
socket.on(apply, data => { // 收到請求
···
this.$confirm(data.self + 向你請求視頻通話, 是否同意?, 提示, {
confirmButtonText: 同意,
cancelButtonText: 拒絕,
type: warning
}).then(async () => {
await this.createP2P(data); // 同意之後創建自己的 peer 等待對方的 offer
await this.onDataChannel(); // 接收 DataChannel
···
}).catch(() => {
···
});
});


聊天

連接成功後，就可以進行簡單的聊天了，和之前講 API 時的栗子基本一樣。本次只實現了簡單的文本聊天，DataChannel 還支持文件傳輸，這個我們以後有機會再講。另外筆者之前還寫過 http://Socket.io 實現的好友群聊等，感興趣的同學可以看看 ??????Vchat — 從頭到腳，擼一個社交聊天系統（vue + node + mongodb）。

send(arr) { // 發送消息
if (arr[0] === text) {
let params = {account: this.account, time: this.formatTime(new Date()), mes: this.sendText, type: text};
this.channel.send(JSON.stringify(params));
this.messageList.push(params);
this.sendText = ;
} else { // 處理數據同步
this.channel.send(JSON.stringify(arr));
}
}


畫板同步

一直說需要將各自的畫板操作同步給對方，那到底什麼時機來觸發同步操作呢？又需要同步哪些數據呢？在之前封裝畫板類的時候我們提到過，所有繪圖需要的數據都通過參數形式傳遞。

this.line(this.last, now, this.lineWidth, this.drawColor);


所以很容易想到，我們只需要在每次自己繪圖也就是滑鼠移動時，將繪圖所需的數據、操作的類型（也許是撤回、前進等操作）都發送給對方就可以了。在這裡我們利用一個回調函數去通知頁面什麼時候開始給對方發送數據。

// 有省略
constructor(canvas, {moveCallback}) {
···
this.moveCallback = moveCallback || function () {}; // 滑鼠移動的回調
}
onmousemove(e) { // 滑鼠移動
this.isMoveCanvas = true;
let endx = e.offsetX;
let endy = e.offsetY;
let width = endx - this.x;
let height = endy - this.y;
let now = [endx, endy]; // 當前移動到的位置
switch (this.drawType) {
case line : {
let params = [this.last, now, this.lineWidth, this.drawColor];
this.moveCallback(line, ...params);
this.line(...params);
}
break;
case rect : {
let params = [this.x, this.y, width, height, this.lineWidth, this.drawColor];
this.moveCallback(rect, ...params);
this.rect(...params);
}
break;
case polygon : {
let params = [this.x, this.y, this.sides, width, height, this.lineWidth, this.drawColor];
this.moveCallback(polygon, ...params);
this.polygon(...params);
}
break;
case arc : {
let params = [this.x, this.y, width, height, this.lineWidth, this.drawColor];
this.moveCallback(arc, ...params);
this.arc(...params);
}
break;
case eraser : {
let params = [endx, endy, this.width, this.height, this.lineWidth];
this.moveCallback(eraser, ...params);
this.eraser(...params);
}
break;
}
}


看起來挺丑，但是這麼寫是有原因的。首先 moveCallback 不能放在相應操作函數的下面，因為都是同步操作，有些值在繪圖完成後會發生改變，比如 last 和 now ，繪圖完成後，二者相等。

其次，不能將 moveCallback 寫在相應操作函數內部，否則會無限循環。你想，你畫了一條線，Callback 通知對方也畫一條，對方也要調用 line 方法繪製相同的線。結果倒好，Callback 在 line 方法內部，它立馬又得反過來告訴你，這樣你來我往，一回生二回熟，來而不往非禮也，額，不好意思，說快了。反正會造成一些麻煩。

頁面收到 Callback 通知以後，直接調用 send 方法，將數據傳遞給對方。

moveCallback(...arr) { // 同步到對方
this.send(arr);
},
send(arr) { // 發送消息
if (arr[0] === text) {
···
} else { // 處理數據同步
this.channel.send(JSON.stringify(arr));
}
}


接收到數據後，調用封裝類相應方法進行繪製。

handleChannel(channel) { // 處理 channel
···
channel.onmessage = (e) => { // 收到消息 普通消息類型是 對象
if (Array.isArray(JSON.parse(e.data))) { // 如果收到的是數組，進行結構
let [type, ...arr] = JSON.parse(e.data);
this.palette[type](...arr); // 調用相應方法
} else {
this.messageList.push(JSON.parse(e.data)); // 接收普通消息
}
// console.log(channel onmessage, e.data);
};
}


總結

至此，我們本期的主要內容就講完了，我們講了雙向數據通道 RTCDataChannel 的使用，簡單的白板演示以及雙人協作的共享畫板。因為很多內容是基於上一期的示例改造的，所以省略了一些基礎代碼，不好理解的同學建議兩期結合起來看（我是比較啰嗦了，來來回回說了好幾遍，主要還是希望大家看的時候能有所收穫）。

交流群

qq前端交流群：960807765，歡迎各種技術交流，期待你的加入

後記

如果你看到了這裡，且本文對你有一點幫助的話，希望你可以動動小手支持一下作者，感謝??。文中如有不對之處，也歡迎大家指出，共勉。

• 本文示例 源碼庫 webrtc-stream
• 文章倉庫 ????fe-code

更多文章：

• 【2019 前端進階之路】Vue 組件間通信方式完整版
• 【2019 前端進階之路】JavaScript 原型和原型鏈及 canvas 驗證碼實踐
• 【2019 前端進階之路】站住，你這個Promise！
• 【從頭到腳】擼一個多人視頻聊天 — 前端 WebRTC 實戰（一）
• 【從頭到腳】擼一個社交聊天系統（vue + node + mongodb）- ??????Vchat

歡迎關注公眾號 前端發動機，第一時間獲得作者文章推送，還有海量前端大佬優質文章，致力於成為推動前端成長的引擎。

推薦閱讀：