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