前端項(xiàng)目實(shí)戰(zhàn)：麥當(dāng)勞對講機(jī)，手?jǐn)]一個！
共 6070字，需瀏覽 13分鐘
·
2024-05-27 08:51
大廠技術(shù) 高級前端 Node進(jìn)階
點(diǎn)擊上方 程序員成長指北，關(guān)注公眾號
回復(fù)1，加入高級Node交流群
前端，我眼看它出現(xiàn)、它成長、它成熟，卻遠(yuǎn)遠(yuǎn)不是結(jié)束。因此，我想說給你聽，讓你對我們身處的行業(yè)，有個大框架式的認(rèn)知，知道：它是怎么來的，從而去判斷，它要往哪里去。
引言：這周，麥當(dāng)勞APP崩了上了熱搜！什么情況？漢堡那么搶手了嗎？真實(shí)原因是：麥當(dāng)勞App崩了！是的，說出來大家可能都不相信。僅僅是因?yàn)橐粋€“六一兒童節(jié)”的定制玩具——對講機(jī)（今年推出的一款麥樂雞薯?xiàng)l“對醬機(jī)”，購買任意食品或者套餐+38元即可換購。），麥當(dāng)勞APP又經(jīng)受了一波大流量的考驗(yàn)。整個朋友圈都在搶對講機(jī)。
但是對于窮游人生的我們，38塊也太貴了。我們要不手?jǐn)]一個？我們可是無所不能的前端啊。畢竟，全棧我們都能做~哈哈。不嘚瑟，下面就講講，如何通過前端技術(shù)實(shí)現(xiàn)一個網(wǎng)頁版的對講機(jī)。真正做到“對醬機(jī)”自由！
從現(xiàn)象到靈感：技術(shù)人的職業(yè)病
麥當(dāng)勞App的這次小“風(fēng)波”，讓我有了一個奇特的想法。想象一下，如果將WebRTC、WebSocket等現(xiàn)代前端技術(shù)巧妙融合，我們完全可以打造出一款即時、流暢、跨平臺的虛擬對講機(jī)應(yīng)用，讓我們在親愛的她或者孩子面前收獲“哇塞~”。先上效果！
技術(shù)揭秘：前端如何實(shí)現(xiàn)虛擬對講機(jī)？
1. WebRTC的魔力：實(shí)時通訊要想做的精致，當(dāng)然要用WebRTC。因?yàn)閃ebRTC允許瀏覽器間直接進(jìn)行音視頻通信，無需中間服務(wù)器轉(zhuǎn)碼。我們無所不能的前端工程師可以利用它來捕捉音頻輸入，實(shí)現(xiàn)即時音頻傳輸，讓一臺對講機(jī)的每一句話都能即時送達(dá)到另一端。
2. WebSocket的橋梁作用：在WebRTC處理音視頻數(shù)據(jù)的同時，WebSocket作為高效的雙向通信協(xié)議，能夠承擔(dān)起信令傳輸?shù)闹厝?，確保對講雙方的連接建立與維護(hù)，實(shí)現(xiàn)用戶間的無縫對話。
但是！
本次我準(zhǔn)備先擼一個版本，等不了了。技術(shù)棧選擇“HTML\CSS\JAVASCRIPT\NodeJS\WebSocket”，做一個中心化非點(diǎn)對點(diǎn)的版本，先玩一下，看下能不能收獲“哇塞~”。
以下是我的整體方案和關(guān)鍵實(shí)現(xiàn)代碼（可運(yùn)行的代碼包關(guān)注公眾號程序員成長指北，回復(fù)麥當(dāng)勞獲得）
1. 設(shè)計(jì)界面: 使用HTML和CSS來設(shè)計(jì)對講機(jī)的界面。因?yàn)槭秦ぐ?，肯定要有一個錄制語音的按鈕、一個結(jié)束錄制的按鈕、一個播放語音的操作。把功能先做上去。
2. 實(shí)時通信：
? 前端：WebSocket是一種在單個TCP連接上進(jìn)行全雙工通信的協(xié)議。前端開發(fā)出ws代碼，使用WebSocket在前端和后端NodeJS之間建立實(shí)時連接。
? 服務(wù)器端：使用Node架構(gòu)一個服務(wù)器來處理WebSocket連接并廣播消息。使用如ws來完成WebSocket的處理。
3. 編寫JavaScript代碼
? 先用三大語言把基本元素寫出來，用JS綁定好各種事件。
? 連接WebSocket：在前端JavaScript代碼中，你需要建立與WebSocket服務(wù)器的連接。
? 發(fā)送消息：當(dāng)用戶點(diǎn)擊發(fā)送按鈕時，捕獲文本輸入框中的文本，并通過WebSocket連接發(fā)送。
? 接收消息：監(jiān)聽WebSocket連接上的消息事件，當(dāng)收到消息時，將其更新到音頻audio內(nèi)容中，用來播放語音。
4. 調(diào)試優(yōu)化界面
? 這里用gpt生成了一些麥當(dāng)勞風(fēng)格的元素，比如按鈕、頭圖、背景等等，這樣就有了一種玩具風(fēng)格；
? 可以把a(bǔ)udio設(shè)置為自動播放，按下開始錄制，抬起結(jié)束錄制，這樣就把兩個按鈕變成了一個，更像對講機(jī)；
以下是核心代碼：
// web-radio.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>麥當(dāng)勞對講機(jī)</title>
</head>
<body>
<input type="text" id="messageInput" placeholder="輸入消息...">
<button onclick="sendMessage()">發(fā)送</button>
<div id="chatLog"></div>
<script>
let ws = new WebSocket('ws://your-websocket-server-url');
ws.onmessage = function(event) {
let chatLog = document.getElementById('chatLog');
chatLog.innerHTML += event.data + '<br>';
};
function sendMessage() {
let messageInput = document.getElementById('messageInput');
let message = messageInput.value;
ws.send(message);
messageInput.value = ''; // 清空輸入框
}
</script>
</body>
</html>后端代碼
// web-radio-server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('received: %s', message);
wss.clients.forEach(function each(client) {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', function close() {
console.log('連接已關(guān)閉');
});
});
console.log('WebSocket 服務(wù)器正在監(jiān)聽 8080 端口');運(yùn)行步驟
? 確保你的環(huán)境中已經(jīng)安裝了Node.js。
? 在項(xiàng)目的根目錄下創(chuàng)建一個名為web-radio.html的文件，并將上面的前端代碼復(fù)制進(jìn)去。
? 創(chuàng)建一個名為web-radio-server.js的文件，并將上面的后端代碼復(fù)制進(jìn)去。
? 在項(xiàng)目根目錄下，使用npm安裝ws庫（如果你還沒有安裝）：
//bash
npm install ws
//運(yùn)行WebSocket服務(wù)器：
//bash
node web-radio-server.js? 打開一個瀏覽器，并訪問web-radio.html文件;
? 在另一個瀏覽器標(biāo)簽或設(shè)備上打開相同的web-radio.html頁面，你應(yīng)該能夠在兩個頁面上看到并發(fā)送實(shí)時消息;
結(jié)語
技術(shù)，是連接現(xiàn)實(shí)與想象的橋梁。雖然，只是做了一個很簡單的實(shí)現(xiàn)，但這是個開始。生活中很多的細(xì)節(jié)都可以成為我們一個技術(shù)人娛樂技術(shù)的方式，可能，這也是我們作為技術(shù)人，才能理解的快樂。接下來，我會使用WebRTC來實(shí)現(xiàn)一個比較真實(shí)的對講機(jī)。
Node 社群
我組建了一個氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
“分享、點(diǎn)贊、在看” 支持一下