境搭建與實時通信入門（Set up the Environment 挑戰(zhàn)詳解）)
freeCodeCamp Advanced Node and Express 項目Socket.IO 環(huán)境搭建與實時通信入門Set up the Environment 挑戰(zhàn)詳解【免費下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇基于 freeCodeCamp 課程庫中「Advanced Node and Express」項目里的Set up the Environment挑戰(zhàn)文檔展開。讀完后你不僅會掌握將 Socket.IO 掛接到已鑒權(quán)的 Express 應(yīng)用GitHub 社交登錄 Passport上的完整步驟還能理解該挑戰(zhàn)在課程結(jié)構(gòu)中的定位、challengeType: 2backend挑戰(zhàn)的測試判定機(jī)制以及五條自動校驗規(guī)則的具體實現(xiàn)。挑戰(zhàn)在課程中的定位該挑戰(zhàn)文檔位于 advanced-node-and-express 挑戰(zhàn)目錄是「Advanced Node and Express」這個大型后端項目的第 18 個挑戰(zhàn)也是該項目中Socket.IO 實時通信階段的起點。從 block 結(jié)構(gòu)文件 的challengeOrder可以確認(rèn)它的上下文位置前置挑戰(zhàn)Implementation of Social Authentication III實現(xiàn) GitHub 社交登錄對應(yīng) id589a8eb3f9fc0f352b528e72——也就是說開始本挑戰(zhàn)時你的應(yīng)用已經(jīng)具備 Passport 的 GitHub 策略、ensureAuthenticated中間件和 GitHub 回調(diào)路由后繼挑戰(zhàn)依次為Communicate by Emitting、Handle a Disconnect、Authentication with Socket.IO、Announce New Users、Send and Display Chat Messages。本挑戰(zhàn)搭建的/chat頁面與socket.io環(huán)境正是這五個挑戰(zhàn)共同依賴的基座。整個 block 歸屬于 Quality Assurance 超級模塊advanced-node-and-express是其三個 block 之一。此外該挑戰(zhàn) front matter 中聲明challengeType: 2。對照課程共享包中的類型定義 challenge-types.ts2即backend類型其viewTypes映射為backend、submitTypes映射為backend——這意味著該挑戰(zhàn)在學(xué)員端以后端項目視圖呈現(xiàn)提交后測試代碼會直接訪問項目內(nèi)文件/_api/server.js等做正則斷言而不是在瀏覽器中運行前端斷言。第一步添加 /chat 路由并改造 GitHub 回調(diào)挑戰(zhàn)文檔給出的原始要求是后續(xù)挑戰(zhàn)都會用到chat.pug文件。因此需要在routes.js中添加一條指向/chat的 GET 路由該路由使用ensureAuthenticated中間件并渲染chat.pug同時把{ user: req.user }作為響應(yīng)參數(shù)傳入模板router.get(/chat, ensureAuthenticated, (req, res) { res.render(chat, { user: req.user }); });接著修改已有的/auth/github/callback路由設(shè)置req.session.user_id req.user.id并重定向到/chat。這樣登錄完成后用戶會自動進(jìn)入聊天頁且會話中保存了數(shù)據(jù)庫用戶 id為后續(xù)「Socket.IO 鑒權(quán)」挑戰(zhàn)做鋪墊。第二步用 http.createServer 掛載 Express 并實例化 Socket.IO文檔說明socket.io~2.3.0已作為依賴添加需要在服務(wù)端按如下方式引入——注意 Socket.IO 的服務(wù)器端必須綁定在一個原生http服務(wù)器上而不是直接掛在 Express 應(yīng)用上const http require(http).createServer(app); const io require(socket.io)(http);這里有兩點值得展開http.createServer(app)將 Express 應(yīng)用作為請求處理器掛到 Node.js 內(nèi)置http模塊創(chuàng)建的服務(wù)器實例上使 Express 繼續(xù)處理普通 HTTP 請求require(socket.io)(http)返回的io實例則附加在同一http服務(wù)器上負(fù)責(zé) WebSocket 長連接的管理。兩者共用同一個端口和同一個http實例因此必須把原來app.listen那一行改為http.listen——因為 Express 本身不直接監(jiān)聽端口真正的監(jiān)聽者變成了包裹了它的http服務(wù)器。第三步監(jiān)聽連接事件io.on(connection, ...)Socket.IO 基于事件模型on關(guān)鍵字用于監(jiān)聽特定事件它接收兩個參數(shù)——事件名字符串和事件觸發(fā)時執(zhí)行的處理函數(shù)。對「新連接」這一事件而言第二個參數(shù)約定命名為socket它代表一個獨立已連接的客戶端io.on(connection, socket { console.log(A user has connected); });文檔要求在數(shù)據(jù)庫連接建立之后加入這段監(jiān)聽代碼。加載應(yīng)用并完成鑒權(quán)登錄后服務(wù)端控制臺應(yīng)打印A user has connected這是本階段的第一次運行驗證。第四步客戶端連接對客戶端而言連接代碼只有兩行添加到鑒權(quán)頁面加載的client.js中/*global io*/ let socket io();/*global io*/是 JSHint 風(fēng)格的注釋聲明用于抑制「io未定義」的 lint 報錯——因為io全局對象由chat.pug頁面中通過可靠 CDN 引入的 Socket.IO 客戶端庫提供無參調(diào)用io()只適用于連接同 URL/同服務(wù)器上托管的 Socket.IO 服務(wù)若要連接部署在其他位置的 Socket.IO 服務(wù)器則需顯式寫出地址io.connect(URL);。自動校驗規(guī)則五條 Hint 測試逐條解析該挑戰(zhàn)屬于backend類型提交后測試代碼會通過fetch讀取項目文件并做正則斷言。文檔中定義的# --hints--部分包含 5 條斷言它們精確刻畫了本挑戰(zhàn)的「正確實現(xiàn)」邊界1.socket.io必須出現(xiàn)在依賴中——測試讀取/_api/package.jsonconst url new URL(/_api/package.json, code); const res await fetch(url); const packJson await res.json(); assert.property( packJson.dependencies, socket.io, Your project should list socket.io as a dependency );2. 必須正確 require 內(nèi)置http模塊——讀取/_api/server.js用成對引號反向引用\1保證 require 字符串與變量一致const url new URL(/_api/server.js, code); const res await fetch(url); const data await res.text(); assert.match( data, /http.*.*require.*(|)http\1/s, Your project should list http as a dependency );3.socket.io必須以http為參數(shù)實例化為io——正則要求io、require(socket.io)、http三者按序出現(xiàn)assert.match( data, /io.*.*require.*(|)socket.io\1.*http/s, You should correctly require and instantiate socket.io as io. );4. 服務(wù)端必須監(jiān)聽connection事件且第二參變量名為socketassert.match( data, /io.on.*(|)connection\1.*socket/s, io should listen for connection and socket should be the 2nd arguments variable );5. 客戶端必須以socket為變量名完成連接——讀取/_public/client.jsconst url new URL(/public/client.js, code); const res await fetch(url); const data await res.text(); assert.match( data, /socket.*.*io/s, Your client should be connection to server with the connection defined as socket );從這些斷言可以看出課程設(shè)計的約束粒度不僅要求功能可用還要求變量命名http、io、socket與官方教程一致便于后續(xù)挑戰(zhàn)的代碼模式保持一致。機(jī)制溯源挑戰(zhàn)文檔如何變成可運行的課程數(shù)據(jù)從倉庫工程角度看這類挑戰(zhàn)是「Markdown 課程文檔 結(jié)構(gòu)化 front matter」的產(chǎn)物front matter 提供id、title、challengeType、forumTopicId、dashedName等元數(shù)據(jù)正文中的# --description--段落作為學(xué)員看到的題目描述# --hints--段落按「一句提示語 一個 js 代碼塊」成對出現(xiàn)即測試斷言。解析入口位于 challenge-parser 解析器而字段的合法性則由 challenge-schema.js 以 Joi 校驗。dashedName本文檔為set-up-the-environment用于生成 URL 友好的錨點例如后續(xù)挑戰(zhàn)中「查看已完成項目」的論壇鏈接即按#set-up-the-environment定位討論帖。下一步從「能連上」到「能通信」本挑戰(zhàn)的終點是控制臺打印A user has connected。緊接著的下一挑戰(zhàn) Communicate by Emitting 將在本挑戰(zhàn)搭好的connection監(jiān)聽器基礎(chǔ)上引入io.emit(user count, currentUsers)廣播用戶數(shù)事件客戶端則用socket.on(user count, ...)接收——即從「建立連接」推進(jìn)到「雙向事件通信」并最終串聯(lián)出完整的實時聊天室功能。小結(jié)/chat路由 ensureAuthenticatedchat.pug渲染是 Socket.IO 階段的頁面基座GitHub 回調(diào)中寫入req.session.user_id并重定向/chat為后續(xù) Socket 層鑒權(quán)埋下伏筆http.createServer(app)require(socket.io)(http)http.listen是 Express 應(yīng)用接入 Socket.IO 的標(biāo)準(zhǔn)三步io.on(connection, socket ...)與服務(wù)端let socket io()構(gòu)成最小可用的連接閉環(huán)五條 hint 測試以正則斷言鎖定了依賴聲明、變量命名與事件監(jiān)聽的實現(xiàn)細(xì)節(jié)這也是 freeCodeCampbackend類挑戰(zhàn)challengeType: 2的典型驗收方式?！久赓M下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 freeCodeCamp Advanced Node and Express 項目：Socket.IO 環(huán)境搭建與實時通信入門（Set up the Environment 挑戰(zhàn)詳解）
freeCodeCamp Advanced Node and Express 項目Socket.IO 環(huán)境搭建與實時通信入門Set up the Environment 挑戰(zhàn)詳解【免費下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇基于 freeCodeCamp 課程庫中「Advanced Node and Express」項目里的Set up the Environment挑戰(zhàn)文檔展開。讀完后你不僅會掌握將 Socket.IO 掛接到已鑒權(quán)的 Express 應(yīng)用GitHub 社交登錄 Passport上的完整步驟還能理解該挑戰(zhàn)在課程結(jié)構(gòu)中的定位、challengeType: 2backend挑戰(zhàn)的測試判定機(jī)制以及五條自動校驗規(guī)則的具體實現(xiàn)。挑戰(zhàn)在課程中的定位該挑戰(zhàn)文檔位于 advanced-node-and-express 挑戰(zhàn)目錄是「Advanced Node and Express」這個大型后端項目的第 18 個挑戰(zhàn)也是該項目中Socket.IO 實時通信階段的起點。從 block 結(jié)構(gòu)文件 的challengeOrder可以確認(rèn)它的上下文位置前置挑戰(zhàn)Implementation of Social Authentication III實現(xiàn) GitHub 社交登錄對應(yīng) id589a8eb3f9fc0f352b528e72——也就是說開始本挑戰(zhàn)時你的應(yīng)用已經(jīng)具備 Passport 的 GitHub 策略、ensureAuthenticated中間件和 GitHub 回調(diào)路由后繼挑戰(zhàn)依次為Communicate by Emitting、Handle a Disconnect、Authentication with Socket.IO、Announce New Users、Send and Display Chat Messages。本挑戰(zhàn)搭建的/chat頁面與socket.io環(huán)境正是這五個挑戰(zhàn)共同依賴的基座。整個 block 歸屬于 Quality Assurance 超級模塊advanced-node-and-express是其三個 block 之一。此外該挑戰(zhàn) front matter 中聲明challengeType: 2。對照課程共享包中的類型定義 challenge-types.ts2即backend類型其viewTypes映射為backend、submitTypes映射為backend——這意味著該挑戰(zhàn)在學(xué)員端以后端項目視圖呈現(xiàn)提交后測試代碼會直接訪問項目內(nèi)文件/_api/server.js等做正則斷言而不是在瀏覽器中運行前端斷言。第一步添加 /chat 路由并改造 GitHub 回調(diào)挑戰(zhàn)文檔給出的原始要求是后續(xù)挑戰(zhàn)都會用到chat.pug文件。因此需要在routes.js中添加一條指向/chat的 GET 路由該路由使用ensureAuthenticated中間件并渲染chat.pug同時把{ user: req.user }作為響應(yīng)參數(shù)傳入模板router.get(/chat, ensureAuthenticated, (req, res) { res.render(chat, { user: req.user }); });接著修改已有的/auth/github/callback路由設(shè)置req.session.user_id req.user.id并重定向到/chat。這樣登錄完成后用戶會自動進(jìn)入聊天頁且會話中保存了數(shù)據(jù)庫用戶 id為后續(xù)「Socket.IO 鑒權(quán)」挑戰(zhàn)做鋪墊。第二步用 http.createServer 掛載 Express 并實例化 Socket.IO文檔說明socket.io~2.3.0已作為依賴添加需要在服務(wù)端按如下方式引入——注意 Socket.IO 的服務(wù)器端必須綁定在一個原生http服務(wù)器上而不是直接掛在 Express 應(yīng)用上const http require(http).createServer(app); const io require(socket.io)(http);這里有兩點值得展開http.createServer(app)將 Express 應(yīng)用作為請求處理器掛到 Node.js 內(nèi)置http模塊創(chuàng)建的服務(wù)器實例上使 Express 繼續(xù)處理普通 HTTP 請求require(socket.io)(http)返回的io實例則附加在同一http服務(wù)器上負(fù)責(zé) WebSocket 長連接的管理。兩者共用同一個端口和同一個http實例因此必須把原來app.listen那一行改為http.listen——因為 Express 本身不直接監(jiān)聽端口真正的監(jiān)聽者變成了包裹了它的http服務(wù)器。第三步監(jiān)聽連接事件io.on(connection, ...)Socket.IO 基于事件模型on關(guān)鍵字用于監(jiān)聽特定事件它接收兩個參數(shù)——事件名字符串和事件觸發(fā)時執(zhí)行的處理函數(shù)。對「新連接」這一事件而言第二個參數(shù)約定命名為socket它代表一個獨立已連接的客戶端io.on(connection, socket { console.log(A user has connected); });文檔要求在數(shù)據(jù)庫連接建立之后加入這段監(jiān)聽代碼。加載應(yīng)用并完成鑒權(quán)登錄后服務(wù)端控制臺應(yīng)打印A user has connected這是本階段的第一次運行驗證。第四步客戶端連接對客戶端而言連接代碼只有兩行添加到鑒權(quán)頁面加載的client.js中/*global io*/ let socket io();/*global io*/是 JSHint 風(fēng)格的注釋聲明用于抑制「io未定義」的 lint 報錯——因為io全局對象由chat.pug頁面中通過可靠 CDN 引入的 Socket.IO 客戶端庫提供無參調(diào)用io()只適用于連接同 URL/同服務(wù)器上托管的 Socket.IO 服務(wù)若要連接部署在其他位置的 Socket.IO 服務(wù)器則需顯式寫出地址io.connect(URL);。自動校驗規(guī)則五條 Hint 測試逐條解析該挑戰(zhàn)屬于backend類型提交后測試代碼會通過fetch讀取項目文件并做正則斷言。文檔中定義的# --hints--部分包含 5 條斷言它們精確刻畫了本挑戰(zhàn)的「正確實現(xiàn)」邊界1.socket.io必須出現(xiàn)在依賴中——測試讀取/_api/package.jsonconst url new URL(/_api/package.json, code); const res await fetch(url); const packJson await res.json(); assert.property( packJson.dependencies, socket.io, Your project should list socket.io as a dependency );2. 必須正確 require 內(nèi)置http模塊——讀取/_api/server.js用成對引號反向引用\1保證 require 字符串與變量一致const url new URL(/_api/server.js, code); const res await fetch(url); const data await res.text(); assert.match( data, /http.*.*require.*(|)http\1/s, Your project should list http as a dependency );3.socket.io必須以http為參數(shù)實例化為io——正則要求io、require(socket.io)、http三者按序出現(xiàn)assert.match( data, /io.*.*require.*(|)socket.io\1.*http/s, You should correctly require and instantiate socket.io as io. );4. 服務(wù)端必須監(jiān)聽connection事件且第二參變量名為socketassert.match( data, /io.on.*(|)connection\1.*socket/s, io should listen for connection and socket should be the 2nd arguments variable );5. 客戶端必須以socket為變量名完成連接——讀取/_public/client.jsconst url new URL(/public/client.js, code); const res await fetch(url); const data await res.text(); assert.match( data, /socket.*.*io/s, Your client should be connection to server with the connection defined as socket );從這些斷言可以看出課程設(shè)計的約束粒度不僅要求功能可用還要求變量命名http、io、socket與官方教程一致便于后續(xù)挑戰(zhàn)的代碼模式保持一致。機(jī)制溯源挑戰(zhàn)文檔如何變成可運行的課程數(shù)據(jù)從倉庫工程角度看這類挑戰(zhàn)是「Markdown 課程文檔 結(jié)構(gòu)化 front matter」的產(chǎn)物front matter 提供id、title、challengeType、forumTopicId、dashedName等元數(shù)據(jù)正文中的# --description--段落作為學(xué)員看到的題目描述# --hints--段落按「一句提示語 一個 js 代碼塊」成對出現(xiàn)即測試斷言。解析入口位于 challenge-parser 解析器而字段的合法性則由 challenge-schema.js 以 Joi 校驗。dashedName本文檔為set-up-the-environment用于生成 URL 友好的錨點例如后續(xù)挑戰(zhàn)中「查看已完成項目」的論壇鏈接即按#set-up-the-environment定位討論帖。下一步從「能連上」到「能通信」本挑戰(zhàn)的終點是控制臺打印A user has connected。緊接著的下一挑戰(zhàn) Communicate by Emitting 將在本挑戰(zhàn)搭好的connection監(jiān)聽器基礎(chǔ)上引入io.emit(user count, currentUsers)廣播用戶數(shù)事件客戶端則用socket.on(user count, ...)接收——即從「建立連接」推進(jìn)到「雙向事件通信」并最終串聯(lián)出完整的實時聊天室功能。小結(jié)/chat路由 ensureAuthenticatedchat.pug渲染是 Socket.IO 階段的頁面基座GitHub 回調(diào)中寫入req.session.user_id并重定向/chat為后續(xù) Socket 層鑒權(quán)埋下伏筆http.createServer(app)require(socket.io)(http)http.listen是 Express 應(yīng)用接入 Socket.IO 的標(biāo)準(zhǔn)三步io.on(connection, socket ...)與服務(wù)端let socket io()構(gòu)成最小可用的連接閉環(huán)五條 hint 測試以正則斷言鎖定了依賴聲明、變量命名與事件監(jiān)聽的實現(xiàn)細(xì)節(jié)這也是 freeCodeCampbackend類挑戰(zhàn)challengeType: 2的典型驗收方式?！久赓M下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考