網(wǎng)絡(luò)課程websocketreact.js前端

摘要知識貯藏在謙虛的大海中。在物質(zhì)越來越充實的年代，知識方面的匱乏反而越來越突出。因此，網(wǎng)上慕課或是網(wǎng)上書籍應(yīng)運而生。在國外，“微課程”概念最早是由美國戴維首創(chuàng)的。而在微課的持續(xù)發(fā)展過程中，國外對于微課程的研究拓展于不同的各個方面。在國內(nèi)，由于流媒體的發(fā)展，微課程成為了一個里程碑級的產(chǎn)物。在這個產(chǎn)品中，用戶可以在網(wǎng)上選擇自己感興趣或是想要了解的課程，隨時隨地聽課學(xué)習(xí)。軟件分為兩個主頁面，商城頁面以及用戶信息頁面。商城頁面為專欄、課程的列表，具備搜索功能；用戶信息頁面為用戶個人信息的展示。在搭建工程之前，首先要捋清楚該產(chǎn)品的整體框架、各個模塊之間的關(guān)系以及繪制出所需的后臺數(shù)據(jù)庫、整理各個變量之間的關(guān)系等。本書首先介紹了H5網(wǎng)絡(luò)課程的發(fā)展前景以及現(xiàn)狀，其次分析了開發(fā)該平臺所需要用到的技術(shù)，如react.js、websocket、typescript等，其中react.js為本次開發(fā)的主技術(shù)棧。接著是各個頁面、模塊的單獨介紹，首先是樣式（截圖展示），而后將頁面內(nèi)較為重要的模塊單獨拎出來講解實現(xiàn)的主要技術(shù)以及步驟。為了方面展示，在本產(chǎn)品中特意將錄像源以及展示源安置在同一個頁面內(nèi)以便觀察現(xiàn)象。直播實現(xiàn)所需要的技術(shù)websocket是本書的一個重點，它需要客戶端以及服務(wù)器端兩邊的配合，websocket可以認為是http協(xié)議的升級版本，兩者沒有必要的聯(lián)系。最后即是在前端頁面開發(fā)過程中所遇到的、容易遇到的問題，如頁面兼容性、頁面性能等，本書也進行了詳細的總結(jié)。關(guān)鍵詞：網(wǎng)絡(luò)課程，websocket，react.js，前端

AbstractKnowledgeisstoredintheseaofmodesty.Intheeraofmaterialenrichment,thelackofknowledgehasbecomemoreandmoreprominent.Consequently,onlinecourseworkoronlinebooksbebornattherightmoment.Inforeigncountries,theconceptof"micro-curriculum"wasfirstinventedbyDavidoftheUnitedStates.Inthecourseofthesustaineddevelopmentofmicro-coursesforeignresearchonmicro-curriculumhasexpandedtodifferentaspects.InChina,duetothedevelopmentofstreamingmedia,micro-curriculumhasbecomealandmarkproduct.Inthisproduct,userscanchoosecoursestheyareinterestedinorwanttoknowonline,andlistentothemanytimeandanywhere.Thesoftwareisdividedintotwomainpages,mallpagesanduserinformationpages.Themallpageisalistofcolumnsandcourseswithsearchfunction,andtheuserinformationpageisadisplayoftheuser'spersonalinformation.Beforebuildingtheproject,firstofall,weneedtounderstandtheoverallframeworkoftheproduct,therelationshipbetweenthevariousmodules,anddrawtherequiredbackgrounddatabase,sortingouttherelationshipbetweenthevariousvariables,andsoon.ThisbookfirstintroducesthedevelopmentprospectsandcurrentsituationofH5networkcourse.Secondly,itanalysesthetechnologiesneededtodeveloptheplatform,suchasreact.js,websocket,typescriptandsoon.Amongthem,react.JSisthemaintechnologystackforthisdevelopment.Nextistheindividualintroductionofeachpageandmodule,firstisthestyle(screenshotdisplay),andthenthemoreimportantmoduleinthepageiscarriedoutseparatelytoexplainthemaintechnologyandstepsofimplementation.Foraspectdisplay,thevideosourceandthedisplaysourcearespeciallyplacedinthesamepageinordertoobservethephenomenon.Websocketisoneofthekeytechnologiesinthisbook.Itneedsthecooperationofbothclientandserver.websocketcanberegardedasanupgradedversionofHTTPprotocol.Thereisnonecessaryconnectionbetweenthetwo.Finally,thisbookalsogivesadetailedsummaryoftheproblemsencounteredinthefront-endpagedevelopmentprocess,suchaspagecompatibility,pageperformanceandsoon.Keywords:webcourse,websocket,react.js,front-end

目錄TOC\o"1-3"\h\u1緒論 緒論1.1網(wǎng)絡(luò)微課平臺的意義對于愛好學(xué)習(xí)、想要時時對知識充充電的人來說，只有課下一個學(xué)習(xí)形式是很不夠的，不僅路途遙遠而且時間上有的可能也安排不過來。所以在網(wǎng)絡(luò)異常發(fā)達的今天，我們應(yīng)該充分利用網(wǎng)絡(luò)的優(yōu)勢，讓學(xué)習(xí)、讀書變得更加容易。近年來，網(wǎng)上慕課的興起相信很多學(xué)校的學(xué)生以及老師都有所了解，由此基礎(chǔ)上，很多企業(yè)都爭相效仿開發(fā)出一系列微課app，如樂兒思、千聊、荔枝微課等等。在這些平臺上，人們可以根據(jù)自己的意愿選擇想要聽什么課、不想要聽什么課。不僅如此，這些軟件還有一個特點就是“三人行，人人皆可為師”。只要你有可以跟眾多網(wǎng)友分享的經(jīng)驗或是知識，都可以自己單獨開一門課程上傳到平臺上，如果平臺判定你的課程是有價值的、值得傳播的還會幫你包裝、推廣出去。由此可看出，微課這一類app是近幾年的大熱，而在這個“求賢若渴”的時代，抓住群眾的心理，通過一些渠道或是活動營銷方法把一些有價值的課程推銷出去是一個很好的商機。1.2微課平臺的現(xiàn)狀《國家中長期教育改革和發(fā)展規(guī)劃綱要（2010-2020年）》和《教育信息化十年發(fā)展規(guī)劃（2011-2020年）》兩個文件都明確指出：要將教育信息化納入國家信息化發(fā)展整體戰(zhàn)略，要充分發(fā)揮現(xiàn)代信息技術(shù)優(yōu)勢，注重信息技術(shù)和教育的全面深度融合。這為微課提供了政策支持。以下為目前幾個微課平臺的簡略介紹：（1）荔枝微課：荔枝微課是一個大眾皆可用的知識、生活常識等互相交流的平臺。在荔枝微課里，每個人都可以創(chuàng)建課程并分享你所想要告訴聽眾的知識，同樣也可以點開課程入口聽課學(xué)習(xí)。平臺支持零門檻開課，支持微信公眾號、APP和電腦多種方式聽課開課，擁有語音、圖片、PPT、視頻、音頻等多種講課模式。該平臺開課豐富多樣，包含自我成長、情感關(guān)系、職場提升、投資理財、育兒教育等各個方面[2]。（2）千聊：千聊由騰訊眾創(chuàng)空間孵化，是國內(nèi)領(lǐng)先的在線知識社區(qū)，是一個專注于知識分享的平臺，通過直播的形式讓您直接找到各個領(lǐng)域的專家、老師、達人[3]。在該平臺上，用戶們可以進行在線互動、交流，互相討論學(xué)術(shù)或是觀點。當(dāng)然，也可以對自己感興趣的課程進行購買，隨時回聽回看、重溫課程，鞏固知識。1.3微課平臺應(yīng)用前景展望在網(wǎng)絡(luò)不斷發(fā)展的這個時代，微課平臺將與虎牙直播、微博、facebook等這一類平臺一樣，具有十分廣闊的應(yīng)用前景。對于教師來說，這是一個很大的教學(xué)方式上的改革，突破了一直以來傳統(tǒng)的、受限的聽課、授課形式，可以隨時隨地聽課、授課，使得課程更加具備針對性以及時效性，是傳統(tǒng)課堂的一個資源拓展和重要補充。雖說網(wǎng)絡(luò)授課形式無法取代傳統(tǒng)授課形式，但是這兩種授課形式在當(dāng)今時代是相輔相成的，目前也已有許多學(xué)校以及教師運用網(wǎng)絡(luò)課程來輔助教學(xué)。網(wǎng)絡(luò)課程不僅可以補充課堂上的各種知識，也可以補充課外的知識，讓學(xué)生不再是只會單純的學(xué)習(xí)語數(shù)英的“書呆子”，而是在生活上也能夠?qū)W會做個“聰明人”。相信在不久后，網(wǎng)絡(luò)授課的形式將會越來越受歡迎，應(yīng)用也將會越廣泛。1.4本章小結(jié)本章主要對微課平臺類軟件的意義進行了一番詳細討論，對微課平臺的發(fā)展現(xiàn)狀以及應(yīng)用前景做了基本的介紹。下一章將對如何構(gòu)建微課平臺的大致架構(gòu)設(shè)計思路以及模塊做詳細的解說。

2設(shè)計思路和相關(guān)技術(shù)介紹2.1設(shè)計思路以及模塊在該網(wǎng)絡(luò)微課平臺中，主要將其分為兩個部分：課程展示頁面（tab：商城）以及用戶信息頁面（tab：我的）。“商城”頁面里面主要內(nèi)容就是課程的列表展示，拓展一個搜索課程功能；“我的”頁面里面主要是包含用戶信息、管理列表，外加用于營銷的收益展示。如下圖所示：商城商城搜索功能列表展示用戶信息我的收益展示管理列表圖2.1本設(shè)計的各模塊分布代碼結(jié)構(gòu)設(shè)計如下：appappmodelImagesContextConfigContainersComponentStylesUtil圖2.2代碼結(jié)構(gòu)圖各模塊釋義：Component:復(fù)用組件代碼；Containers:各頁面代碼；Config:配置文件代碼；Context:上下文代碼；Images:本地圖片文件夾；Model:接口模板代碼；Util:各接口代碼；Styles:各樣式表代碼2.2相關(guān)技術(shù)介紹在本次設(shè)計中，主要使用的開發(fā)工具是vscode，輔助工具是photoshop、git、chrome瀏覽器；主要使用的腳本語言/框架為Html5、Css3、React.js、Typescript。下面主要介紹一下編程工具Vscode、作圖工具Photoshop、React.js以及Typescript。VscodeVscode全名叫VisualStudioCode，是由美國微軟公司開發(fā)的一個運行于MacOSX、Windows和Linux之上的，針對于編寫現(xiàn)代Web和云應(yīng)用的跨平臺源代碼編輯器[4]。該編輯器聚合了任何一款現(xiàn)代編輯器所應(yīng)該具備的特性，包括語法高亮，熱鍵綁定，括號匹配以及代碼片段收集，同時也具備對Git的開箱即用的支持。該編輯器也能夠使用webstorm、sublime等軟件替代，這些編程軟件都是經(jīng)過本人實踐過認為較好用的軟件。PhotoshopPhotoshop是由Adobe公司開發(fā)的一款圖片編輯軟件，也是為今較多人用且較好用的一款軟件。從功能上看，它具備圖像編輯、圖像合成、特效制作等，還可以縮小、放大、去除圖像的斑點等操作，在圖片制作、廣告攝影、網(wǎng)頁設(shè)計上面都有它的身影。Photoshop軟件可以把幾張很普通的圖片和設(shè)計者的思路、想法聯(lián)系在一起，操作簡便易懂，使設(shè)計、創(chuàng)作者能將更多的時間放在構(gòu)思畫面上去。（3）React.jsMVC框架是模型（model）-視圖（view）-控制器（controller）的縮寫。MVC分層這種層次分明的結(jié)構(gòu)對管理一些較為復(fù)雜的應(yīng)用程序有很好的幫助，它具有耦合性低、重用性高、生命周期成本低、可維護性高等優(yōu)點。React.js是由Facebook公司研發(fā)的一個用于構(gòu)建組件化UI的庫，由于它的性能出眾、代碼邏輯簡單，漸漸的越來越受程序員們的關(guān)注與喜愛。它介紹了JavascriptXML和JSX的使用，是Javascript的語法拓展。在使用React框架時，可以充分利用React的官網(wǎng)，里面有詳細的使用教程供開發(fā)者們查閱學(xué)習(xí)。（4）TypescriptTypescript是由微軟開發(fā)的開源的編程語言，它是Javascript的一個超集，而且本質(zhì)上向這個語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭?.3數(shù)據(jù)庫圖表設(shè)計在開發(fā)中，難免會遇到有前端與后臺之間數(shù)據(jù)的交互，這個時候，就需要后臺的數(shù)據(jù)庫的支持。下面是在該需求中所需要的兩個主要的數(shù)據(jù)庫，在用戶信息頁面中，主要是用戶各個信息的圖表：圖2.3用戶信息表接下來是商城頁面中所需要的課程各方面信息的圖表：圖2.4課程信息表當(dāng)前端頁面需要用到這些信息或者更新這些信息的時候，就會用axios去訪問后臺接口，返回的res.data.data就是前端所需要的數(shù)據(jù)列表。2.4論文結(jié)構(gòu)本文主要將所需要闡述的內(nèi)容分為七章來展示，分別為以下：（1）緒論：主要對微課平臺類軟件的意義進行了一番詳細討論，對微課平臺的發(fā)展現(xiàn)狀以及應(yīng)用前景做了基本的介紹；（2）設(shè)計思路和相關(guān)技術(shù)介紹：主要介紹了該網(wǎng)絡(luò)微課平臺的設(shè)計思路以及所需要用到的各個相關(guān)軟件，如：vscode、photoshop等，著重介紹了這兩款軟件的功能、用途以及兩項主要的編程技術(shù)點：React.js、Typescript，并且將兩個主要的數(shù)據(jù)庫設(shè)計以及論文結(jié)構(gòu)設(shè)計在文中加以說明；（3）React組件化：主要講述了react的生命周期函數(shù)以及react最重要的部分——組件之間的通信方式；（4）課程展示：主要介紹了商城展示頁面、點擊相應(yīng)課程所進入的專欄頁面和搜索功能的頁面樣式以及相應(yīng)代碼。在本章所介紹的各個頁面中，主要是前端排版、樣式的工作量以及搜索功能方面的邏輯代碼的實現(xiàn)；（5）直播實現(xiàn)：主要介紹了websocket協(xié)議以及如何利用該協(xié)議分別在客戶端、服務(wù)端實現(xiàn)直播功能；（6）用戶信息頁面：主要展示了用戶信息頁面的各個模塊，大部分都是頁面樣式方面的工作；（7）問題總結(jié)：主要介紹了一些在前端開發(fā)方面需要注意的兼容性以及性能的影響，并且記錄了幾個在開發(fā)過程中所遇見的bug。2.5本章小結(jié)本章主要介紹了該網(wǎng)絡(luò)微課平臺的設(shè)計思路以及所需要用到的各個相關(guān)軟件，如：vscode、photoshop等，著重介紹了這兩款軟件的功能、用途以及兩項主要的編程技術(shù)點：React.js、Typescript，并且將兩個主要的數(shù)據(jù)庫設(shè)計以及論文結(jié)構(gòu)設(shè)計在文中加以說明。

3React組件化將一個完整模塊的代碼拆分為組件之后，不可避免的就會遇到一些組件與組件之間需要數(shù)據(jù)傳遞的問題，這就是組件之間的通信。組件之間的通信又分為兄弟組件通信（同個父組件）、子組件向父組件通信、父組件向子組件通信等。兄弟組件之間的通信其實就是子組件向父組件傳值、父組件向子組件傳值這兩個過程的結(jié)合。接下來將一一介紹。3.1生命周期函數(shù)在介紹各個組件之間傳值的過程之前，先來介紹以下react的生命周期函數(shù)。React生命周期分為三種狀態(tài)：初始頁面結(jié)構(gòu)組建以及渲染（mount）、更新（update）、卸載（unmount）。初始化時常用的由render()、componentWillMount()、componentDidMount()，更新時常用的有componentWillReceiveProps(nextProps)、componentDidUpdate()，銷毀時常用的有componentWillUnmount()。render()render即為組建渲染，主要步驟是創(chuàng)建虛擬dom、進行diff算法、更新dom樹。react這類框架的特點是能夠?qū)崿F(xiàn)數(shù)據(jù)改變視圖，即代碼中利用state狀態(tài)機更新數(shù)據(jù)后，react會自動啟用diff算法，當(dāng)計算結(jié)果與state更新前不一樣時，自動更新dom樹。componentWillMount()該函數(shù)只在組件初始化時調(diào)用一次，此后都不再調(diào)用，此時可以修改ponentDidMount()該函數(shù)在組件渲染之后調(diào)用。componentWillReceiveProps(nextProps)該函數(shù)在組件初始化時不調(diào)用，但是在組件更新時，接收到新的props時調(diào)用。componentDidUpdate()該函數(shù)在組件初始化時不調(diào)用，但是在接下來的組件每次更新完畢之后調(diào)用，此時可以獲取dom節(jié)點。componentWillUnmount()該函數(shù)在組件將要卸載時調(diào)用，在這之前如果前面有設(shè)置一些事件監(jiān)聽或者定時器的話，需要將之清除。3.2父組件向子組件傳值不同于vue.js，react.js的數(shù)據(jù)流動是單向的，父子組件之間的通信是通過props傳遞所需要的信息。在父組件中，假如要調(diào)用子組件，并將狀態(tài)傳遞給子組件，可以這樣寫：<ChildifShow={this.state.ifShow}/>如此，在子組件時想要獲取父組件中的ifShow可以這樣寫：{ps.ifShow&&<div>是否顯示</div>}利用與運算符或者三元運算符能夠靈活地控制在react中組件或者部分模塊的渲染與否。此時，如果父組件中ifShow為true，在子組件中就會渲染出“是否顯示”幾個字，相反的，若父組件中ifShow為false，在子組件中就不會顯示。3.3子組件向父組件傳值若是子組件要向父組件傳遞數(shù)據(jù)，則主要是通過回調(diào)函數(shù)來實現(xiàn)。在子組件中：<div>我是子組件<buttononClick={ps.hideComponent}>隱藏子組件</button></div>在父組件中：<div><buttononClick={this.showComponent}>顯示子組件</button>{this.state.isShow?<ChildhideComponent={this.hideComponent}/>:null }</div>其中，showComponent與hideComponent函數(shù)定義如下：showComponent=()=>{this.setState({isShow:true,});}hideConponent=()=>{this.setState({isShow:false,});}此時，點擊子組件內(nèi)的button就能通過回調(diào)函數(shù)使父組件內(nèi)的isShow值改變，從而控制子組件的渲染與否。3.4子組件與子組件之間的通信子組件與子組件之間的通信又分為跨級組件通信（不同父組件）及兄弟組件通信（同一個父組件）。兄弟之間傳遞數(shù)據(jù)是通過相同的父級組件作為“媒介”來實現(xiàn)，而跨級組件之間的數(shù)據(jù)傳遞普遍是使用context。Context即上下文，屬于react的高級API。它是一個當(dāng)開發(fā)者不想一級一級地傳遞props以及state來傳遞數(shù)據(jù)時，可以提供跨層級組件數(shù)據(jù)傳遞功能的對象。3.5本章小結(jié)本章主要講述了react的生命周期函數(shù)以及react最重要的部分——組件之間的通信方式。

4課程展示4.1商城頁面在商城頁面中，主要包含搜索欄、海報部分、推薦課程部分、浮窗部分，點擊即可進入相應(yīng)的課程或是活動頁面進行聽課、購買等操作。由于主頁的推薦課程經(jīng)常變動，所以相應(yīng)的文本或是圖片均為后臺配置，可減少后期頁面改動時前端的工作量。樣式如下圖所示：圖4.1商城頁面樣式4.2搜索功能在眾多的課程里面，如何讓用戶能夠快速定位到自己感興趣的課程呢？在這個時候，搜索功能是必不可少的。搜索的實現(xiàn)主要思路就是在課程數(shù)據(jù)庫中利用相似查找、關(guān)鍵字查找等方法，將名字符合搜索條件的課程陳列下來，供用戶選擇。如此一來，能夠減少很多用戶查找的時間以及精力，使得用戶體驗感更佳。搜索頁面的樣式如下：圖4.2搜索頁面眾所周知，百度搜索引擎是通過GET請求實現(xiàn)搜索功能的，最淺顯的表現(xiàn)就在于在頁面url上“佩戴”搜索參數(shù)。搜索框中根據(jù)用戶輸入的關(guān)鍵字，發(fā)起請求時請求路徑為當(dāng)前頁面路徑‘/search’。該搜索功能主要利用springmvc框架以及mybatis實現(xiàn)，可以對指定的關(guān)鍵字進行搜索。MyBatis支持普通SQL查詢，存儲過程和高級映射?？刂茖哟a如下：@GetMapping("/search")publicStringlist(@RequestParam(required=false,defaultValue="1",name="p")IntegerpageNo,@RequestParam(required=false,defaultValue="")StringproductName,Modelmodel){Map<String,Object>searchParam=newHashMap<>();searchParam.put("productName",productName);PageInfo<Lizhi>pageInfo=lizhiService.findByPageNo(pageNo,searchParam);model.addAttribute("pageInfo",pageInfo);return"search/list";}當(dāng)搜索結(jié)果過多時，為了摒棄舊時“上一頁”、“下一頁”的分頁模式，我們采用監(jiān)聽頁面滾動的方法來進行懶加載，在react中使用觸發(fā)事件實現(xiàn)如部分代碼如下：<SearchBoxsearchReq={this.handleSearch}link={false}/>handleSearch(value:string){if(value){this.setState({liveList:[],searchStr:value,page:1,initialized:false},()=>this.getList());}}getList(){if(this.state.init){this.setState({init:false});}const{page,searchStr}=this.state;sessionStorage.setItem('searchValue',searchStr);axios.get('/search/channel',{params:{q:searchStr,page:page,per_page:20}}).then((res)=>{letlist=res.data.data;lethasMore=list.length>0;list=this.state.liveList.concat(list);this.setState({hasMore:hasMore,liveList:list,total:res.data.pages,initialized:true,page:page+1});});}4.3專欄頁面一系列課程構(gòu)成一個專欄，在商城中點擊某個具體課程專欄即可進入專欄頁面。頁面內(nèi)主要包含海報部分、課程介紹部分以及課程目錄部分，如下圖所示：圖4.3專欄頁面在專欄頁面中，重點部分是底部的“試聽”功能。試聽時運用的是html5新增的audio標簽，主要技術(shù)難點在于播放進度條的樣式以及拖動控制播放進度功能的實現(xiàn)。由于主要是手機端展示的頁面，所以拖動事件的監(jiān)聽主要是依賴手機端的觸摸事件，由ontouchstart、ontouchmove、ontouchend一類，而拖動進度條的具體長度依賴于clientX、offsetX等。點擊“試聽”按鈕之后，試聽列表以及播放進度條樣式如下圖所示：圖4.4試聽列表界面試聽部分代碼展示見附錄。4.4本章小結(jié)本章中，主要介紹了商城展示頁面、點擊相應(yīng)課程所進入的專欄頁面和搜索功能的頁面樣式以及相應(yīng)代碼。在本章所介紹的各個頁面中，主要是前端排版、樣式的工作量以及搜索功能方面的邏輯代碼的實現(xiàn)。在下一章中，將介紹最主要的直播功能實現(xiàn)所需要的技術(shù)。

5直播實現(xiàn)5.1websocket技術(shù)目前為止，輪詢是實現(xiàn)實時通信的最常用的方法，而實時推送，毋庸置疑也會用到輪詢。輪詢是在固定的時間間隔內(nèi)，客戶端向服務(wù)器請求數(shù)據(jù)，然后由服務(wù)器將數(shù)據(jù)返回給客戶端展示。一開始主流的是使用AJAX輪詢的方式來進行通信，但是這種輪詢方式有一定的延時，還會對服務(wù)器造成一定的負載。直到2011年，websocket才被標準化。直播即推送，H5頁面中能夠?qū)崿F(xiàn)直播的技術(shù)有很多，目前web上比較主流的方案是使用HLS和RTMP，在這里介紹的是一個較為簡便的利用websocket協(xié)議實現(xiàn)直播的方法。WebSocket是一種在單個TCP連接上進行全雙工通信的協(xié)議[5]，它使得服務(wù)器與客戶端之間的通信從繁瑣的三次握手、四次握手演變成一次長連接即可保持通信的狀態(tài)，允許服務(wù)器主動向客戶端推送數(shù)據(jù)。圖5.1建立握手時序圖但是websocket有一個限制即在不支持websocket的設(shè)備上是無法使用的。Websocket在服務(wù)器端的實現(xiàn)非常豐富，可以使用node.js、c++、java、python等多種解決方案。5.2socket.io由于websocket原生的API用起來可能沒有那么方便，所以就有了socket.io.js這款集成的插件，它所提供的API能供開發(fā)更方便得使用。Socket.io將websocket和AJAX輪詢進行封裝，實際是websocket的父集，實現(xiàn)了跨瀏覽器的雙向數(shù)據(jù)傳輸。它典型的應(yīng)用場所有：實時聊天應(yīng)用、文檔合并、二進制流傳輸?shù)鹊??？蛻舳撕头?wù)端的socket是一個關(guān)聯(lián)的EventEmitter對象，客戶端socket發(fā)出的事件可以被服務(wù)端的socket接收，同理，服務(wù)端socket發(fā)出的事件也可以被客戶端接收。基于該機制，可以實現(xiàn)雙向交流。socket.io由兩部分組成，與Node.JSHTTPServer集成（或安裝）的服務(wù)器以及客戶端庫。在開發(fā)過程中，想要使用socket.io插件首先要安裝該模塊：npminstall--savesocket.io除了簡單的客戶端與服務(wù)器相互傳遞消息之外，socket.io還提供廣播功能，由于本例中沒有應(yīng)用到，故在此不詳細敘述。5.3websocket客戶端實現(xiàn)Websocket在客戶端的編程只需要使用現(xiàn)成的websocketAPI即可，首先創(chuàng)建一個websocket對象：varSocket=newWebSocket(url,[protocol]);Websocket事件（1）open：連接建立時觸發(fā)，監(jiān)聽事件使用onopen屬性；（2）message：當(dāng)客戶端接收服務(wù)端數(shù)據(jù)時引發(fā)該事件，監(jiān)聽事件使用onmessage屬性；（3）error：當(dāng)通信過程中出現(xiàn)錯誤時引發(fā)該事件，監(jiān)聽事件使用onerror屬性；（4）close：當(dāng)websocket連接關(guān)閉時引發(fā)該事件，監(jiān)聽事件使用onclose屬性。Socket.io實現(xiàn)（1）建立一個socket連接varsocket=io(“ws://localhost:3001”);（2）socket.on：監(jiān)聽服務(wù)器消息，監(jiān)聽的事件主要有message（消息傳輸）、connect（連接成功）、disconnect（斷開連接）、error（發(fā)生錯誤）等。（3）socket.emit：向服務(wù)器發(fā)送數(shù)據(jù)，格式為socket.emit(‘msg’,{data:‘string’});圖5.2socket.emit事件連接過程中，觸發(fā)的事件為：connecting->connect；失去連接過程中，觸發(fā)的事件為sh：disconnect->reconnecting->connecting->reconnect->connect。代碼展示Html代碼：<divclassName={style.start}onClick={this.begin.bind(this)}>開始錄制</div>Typescript代碼：begin(){varwsURL=`ws://${document.domain}:3001`;varsocket=io(wsURL);console.log(socket)varback=this.output.current;//返回一個用于在畫布上繪圖的環(huán)境。if(back){varbackcontext=back.getContext('2d');}varvideo=this.source.current;varsuccess=function(stream:any){//獲取視屏流，轉(zhuǎn)換為urlif(video){console.log(stream)video.srcObject=stream;}}vardraw=function(){try{if(backcontext&&video&&back){backcontext.drawImage(video,0,0,back.width,back.height);varurl=back.toDataURL("image/jpeg",0.5);socket.emit('ImgURL',url);}}catch(e){if(=="NS_ERROR_NOT_AVAILABLE"){returnsetTimeout(draw,100);}else{throwe;}}setTimeout(draw,100);}draw();navigator.getUserMedia({video:true,audio:false},success,console.log);setInterval(()=>{if(back){//Canvas的內(nèi)容轉(zhuǎn)化成dataURI并發(fā)送到服務(wù)器，0.5為和壓縮系數(shù)socket.on('receiveData',(url:any)=>{console.log(url)if(this.receive.current){this.receive.current.src=url}})}},100)}5.4websocket服務(wù)器實現(xiàn)剛剛介紹過，websocket在服務(wù)端的實現(xiàn)方法有許多，接下來簡略介紹一下各個方案的實現(xiàn)。Java使用java一般依托于servlet容器，其中Tomcat7、Jetty7及以上版本都開始支持Websocket協(xié)議。以上應(yīng)用對于WebSocket都有各自的實現(xiàn)。但是，它們都遵循RFC6455的通信標準，并且JavaAPI統(tǒng)一遵循JSR356-JavaTMAPIforWebSocket規(guī)范。所以，在實際編碼中，API差異不大。Spring運用spring框架實現(xiàn)websocket時需要搭建的環(huán)境依賴以下jar包：<dependency><groupId>org.springframework</groupId><artifactId>spring-messaging</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-websocket</artifactId></dependency>接下來就是創(chuàng)建websocket處理器以及配置websocket：（1）創(chuàng)建websocket處理器：擴展TextWebSocketHandler或BinaryWebSocketHandler，可以將指定的某些方法重新編寫。Spring在收到WebSocket事件時，會自動調(diào)用事件對應(yīng)的方法。（2）配置websocket：配置可以使用注解或是xml兩種方式，作用是將websocket處理器添加到注冊中心。Socket.io服務(wù)端API//監(jiān)聽客戶端連接,回調(diào)函數(shù)會傳遞本次連接的socketio.on(‘connection’,function(socket));//給所有客戶端廣播消息io.sockets.emit(‘String’,data);//給指定客戶端發(fā)送消息io.sockets.socket(socketid).emit(‘String’,data);//監(jiān)聽客戶端發(fā)送的信息socket.on(‘String’,function(data));//給該socket的客戶端發(fā)送消息socket.emit(‘String’,data);代碼展示varapp=require('express')()varhttp=require('http').Server(app)vario=require('socket.io')(http)varport=3001//監(jiān)聽端口號：3001app.get('/',(req,res)=>{ res.sendFile(__dirname+'/index.html')})io.on('connection',socket=>{ console.log('新用戶接入') socket.on("disconnect",()=>{ console.log('用戶斷開連接') })//監(jiān)聽客戶端發(fā)送的消息socket.on('message',data=>{ console.log('收到數(shù)據(jù)：',data)io.emit('receiveData',data)})})http.listen(port,()=>{ console.log(`服務(wù)器監(jiān)聽本地端口號：${port}`)})

運行結(jié)果當(dāng)運行后臺代碼時，監(jiān)聽到用戶接入行為以及客戶端傳入的數(shù)據(jù)，后臺顯示如下圖所示：圖5.3后臺數(shù)據(jù)傳輸當(dāng)用戶斷開連接時，后臺顯示如下圖所示：圖5.4斷開連接顯示

連接成功后頁面如下圖所示（設(shè)置接收端比錄制端延遲一秒時間）：圖5.5連接成功頁面顯示圖5.5本章小結(jié)本章主要闡述了websocket協(xié)議以及websocket如何在客戶端、服務(wù)端實現(xiàn)直播功能。Websocket協(xié)議與HTTP協(xié)議其實沒有關(guān)聯(lián)，眾所周知，HTTP協(xié)議是一個無狀態(tài)協(xié)議，而websocket協(xié)議能夠使得客戶端以及服務(wù)端保持一個長連接，服務(wù)端能夠主動、實時向客戶端推送數(shù)據(jù)。另外還拓展了websocket父集socket.io插件的使用，并且在該產(chǎn)品中，主要是使用了該插件來實現(xiàn)功能。盡管本章只介紹了websocket及相關(guān)技術(shù)，但是實現(xiàn)直播的技術(shù)有很多，我們都可以分別去學(xué)習(xí)并且實踐。

6用戶信息頁面用戶信息頁面主要包含了用戶的昵稱/身份顯示、收益顯示等，收益還提供提現(xiàn)功能，由于不是主要功能，在這里不詳談。主要頁面樣式如下圖所示：圖6.1用戶信息頁面展示6.1個人信息編輯頁面該頁面主要是簡單的昵稱、微信號、電話號、頭像的修改界面。在開發(fā)過程中，該頁面與后臺數(shù)據(jù)庫之間的信息交換主要是通過axios實現(xiàn)，與此同時，在傳遞數(shù)據(jù)較多時，為了代碼的簡便性以及方便性，就會使用FormData對象發(fā)送數(shù)據(jù)。其中頭像的更換功能的實現(xiàn)思路主要是將用于置放頭像的div的click事件與隱藏的input（type=file）標簽的click相互綁定。當(dāng)監(jiān)聽到input標簽的change事件時，就讀取input標簽的文件用于更換div中顯示的圖片并且在點擊提交按鈕的時候?qū)D片文件傳給后臺更換。該頁面樣式如下圖所示：圖6.2修改信息頁面6.2管理欄管理欄主要分為推廣管理、會員管理、學(xué)習(xí)管理，這些icon點開的頁面都是一些個人積分、活動介紹的信息或是跳轉(zhuǎn)至第三方頁面。在單獨的這些頁面里面，我們可以查詢自己的積分或是團隊收益，也可以了解到升級會員的各項權(quán)益?；谠摬糠侄际侵貜?fù)性的組件搭建以及樣式調(diào)試，在此就不再詳述。6.3提現(xiàn)欄提現(xiàn)欄是供用戶將自己名下的金額提現(xiàn)到支付寶的操作。提現(xiàn)頁面內(nèi)的提現(xiàn)總額是通過頁面初始化時調(diào)取接口的返回值顯示（下圖為初始用戶無可提現(xiàn)金額）。當(dāng)用戶填寫了提現(xiàn)金額以及收款方實名后，點擊按鈕前端會將兩個輸入框內(nèi)的數(shù)據(jù)傳遞給后臺操作。提現(xiàn)頁面樣式如下圖：圖6.3提現(xiàn)申請頁面6.4本章小結(jié)本章主要是展示了用戶信息頁面的各個模塊，大部分都是頁面樣式方面的工作，個別需要與后臺交互，獲取到后臺接口的信息在頁面顯示，這個時候就運用到了axios（基于ajax封裝的方法）來獲取接口的數(shù)據(jù)來在頁面進行實時更新。

7問題總結(jié)7.1頁面兼容性在前端編程方面，頁面兼容性方面的問題是不可避免的。最淺顯的就比如在不同的分辨率設(shè)備上頁面的顯示是否完全、頁面排布是否仍然一致，又或是在ios設(shè)備、android設(shè)備上頁面的顯示是否一致。這個時候就涉及到要將頁面設(shè)計成響應(yīng)式才可以做到兼容。7.1.1頁面顯示方面在這里就簡單闡述一下響應(yīng)式頁面的實現(xiàn)。在開發(fā)過程中主要是在css樣式方面做工作。在頁面布局上，我所用的響應(yīng)式實現(xiàn)方式主要是以下兩種：（1）使用vw、vh、em等百分比長度單位；（2）使用@media（媒體查詢）：使用媒體查詢，可以針對不同大小、不同分辨率的屏幕定義不同的樣式，在刷新瀏覽器重置的過程中，頁面會自動根據(jù)瀏覽器的寬高進行新一輪的渲染。如下代碼所示：@media(min-width:1024px){//當(dāng)屏幕分辨率不小于1024px時.cover{width:100%;height:110px;}.coverimg{width:100%;height:110px;border-radius:5px;border-bottom-right-radius:0;border-bottom-left-radius:0;}}7.1.2js事件兼容方面由于每個瀏覽器使用的內(nèi)核不同，所以js使用的事件觸發(fā)有時候也不同。特別是IE瀏覽器與其他的瀏覽器之間有一些差異是需要寫一些兼容性的代碼去解決的。舉例說在產(chǎn)生事件的源上，IE是用event.srcElement，在火狐下是用e.target。如下代碼部分所示：varevent=window.event||e;varsrcElement=event.srcElement||event.target;如此一來，獲得的srcElement就是同時在IE以及火狐瀏覽器下的事件源。7.2頁面性能不僅僅是兼容性，頁面性能也是前端工作很需要注重的一個方面。性能主要就是用戶的體驗性，體現(xiàn)在頁面始加載時是否會白屏、頁面加載資源（圖片、音樂等）是否會卡頓等方面。能夠優(yōu)化頁面性能的方法有很多：（1）代碼規(guī)范方面，如將js代碼放在最后面防止頁面加載時阻塞、盡量不要使用css表達式等；（2）使用的圖片等資源質(zhì)量盡量不要太大；（3）將頁面的一些較大的資源緩存起來，使得下次進入頁面的時候不需要再次請求該資源，能夠在頁面緩存中直接讀取數(shù)據(jù)在頁面中顯示。在緩存方面，用到的技術(shù)主要是cookie以及webstorage這兩個。而webstorage比起cookie的主要優(yōu)勢在于webstorage的存儲量大、存儲時間長以及有許多豐富易用的接口，比如setItem、getItem、removeItem一類。7.3bug記錄在開發(fā)過程中，難免會遇到許多問題，在這里，主要列舉以下幾個較為印象鮮明的bug：（1）在信息填寫頁面中，眾所周知，在手機app端，點擊輸入框底部是會 自動彈出鍵盤界面的，而鍵盤界面并不屬于視窗范圍內(nèi)，所以這個時候視窗 的高度是會減小的。而在開發(fā)過程中，由于沒有意識到這個問題，設(shè)置了底部按鈕fixed在頁面底部的話，就會在鍵盤彈起的時候，將底部按鈕也頂在鍵盤上方，就會使得頁面布局混亂，不夠美觀。解決辦法就是利用第一點闡述過的使用媒體查詢方法來使得視窗高度發(fā)生變化的時候能夠監(jiān)聽到，然后改變頁面的布局，其實也算是響應(yīng)式布局的一方面。解決代碼如下所示：Html代碼：<inputtype="text"className={style.inputBox}onChange={this.handleName}onFocus={this.hideKeyBoard}onBlur={this.showKeyBoard}/>Typescript代碼：fixBackContentEmpty(){setTimeout(()=>{window.scrollTo(0,1);},100);}showKeyBoard(){console.log('showKeyBoard');if(isPC)return;this.setState({keyboardShow:true},()=>{fixBackContentEmpty();});}hideKeyBoard(){console.log('hideKeyBoard');if(isPC)return;this.setState({keyboardShow:false});}（2）在電腦端打開直播頁面點擊“開始錄制”按鈕之后，啟動攝像頭，但是在當(dāng)前頁面返回別的頁面的時候，攝像頭沒有關(guān)閉，仍然處于開啟的狀態(tài)，解決方法如下：//該方法在組件將要卸載時觸發(fā)componentWillUnmount(){MediaStreamTtotype.stop();}7.4本章小結(jié)本章主要介紹了一些在前端開發(fā)方面需要注意的兼容性以及性能的影響，并且記錄了幾個在開發(fā)過程中所遇見的bug，希望能給閱讀本文的讀者一些啟發(fā)。

參考文獻高湧.微課現(xiàn)狀分析——以南京曉莊學(xué)院為例[D].南京：南京曉莊學(xué)院， 2018.荔枝微課.百度百科[DB/OL]./item/%E8%8D%9 4%E6%9E%9D%E5%BE%AE%E8%AF%BE/22422586?fr=aladdin,2019-05-01.千聊.百度百科[DB/OL]./item/%E5%8D%83%E8% 81%8A/19739109?fr=aladdin,2019-05-01.Vscode.百度百科[DB/OL]./item/visual%20studio%20c ode/17514281,2019-05-01.Websocket.百度百科[DB/OL]./item/WebSocket/1953 845?fr=aladdin,2019-05-02.靜默虛空.Websocket詳解教程[DB/OL]./jingmoxu kong/p/7755643.html,2019-05-02.funnycoderstar.React中組件通信的幾種方式[DB/OL].https://segmentfault.c om/a/1190000012361461?utm_source=tag-newest,2019-05-02.JunChow520.Socket.io-簡書[DB/OL]./p/4e80b931 cdea,2019-05-03.PimentelV,NickersonBG.Communicatinganddisplayingreal-time dat awithwebsocket[J].IEEEInternetComputing,2012,16(4):45- 53.FetteI,MelnikovA.Thewebsocketprotocol[R].2011.

致謝本設(shè)計（論文）是在我的指導(dǎo)老師兼班主任李光平老師的親切關(guān)懷和悉心指導(dǎo)下完成的。他嚴肅的科學(xué)態(tài)度、嚴謹?shù)闹螌W(xué)精神、精益求精的工作作風(fēng)，深深地感染和激勵著我。從題目的選擇到最終完成，老師都始終給予我細心的指導(dǎo)和不懈的支持。大學(xué)生涯最重要的兩年，我遇到了李光平老師，您治學(xué)嚴謹，學(xué)識淵博，對每一個學(xué)生都盡心盡力的去教導(dǎo)，在我們即將邁進社會之際給予了我們非常大的幫助，為我們營造了一種良好的精神氛圍。授人以魚不如授人以漁，置身其間，耳濡目染，潛移默化，使我接受了全新的思想觀念，樹立了宏偉的學(xué)術(shù)目標，領(lǐng)會了基本的思考方式。四年的大學(xué)生涯即將畫上一個句號，但對于我來說只是人生的一個逗號，我將帶著四年里在大學(xué)學(xué)到的知識踏入社會，開啟新的征程。感謝大學(xué)里的每一位同學(xué)，謝謝你們一直以來給我的支持和鼓勵，讓我的大學(xué)生活變得豐富多彩，從你們每個人的身上，我都學(xué)習(xí)了很多東西。最后，感謝陪同我走了四年的信息工程學(xué)院。特別感謝在百忙之中審閱我論文的專家教授和參加答辯的各位老師，請允許我在這里向你們致以最真誠的祝福。附錄試聽功能部分代碼如下：componentDidMount(){this.fetchChannelInfo();this.fetchProductConfig();fixBackContentEmpty();}componentWillUnmount(){this.setState({initialized:false});window.removeEventListener('scroll',this.initTabScroll);}hasFreeLecture(lectures:LectureModel[]){constfreeLectureList:LectureModel[]=[];if(lectures){lectures.map((lecture)=>{if(lecture.lecture_type==='open_lecture'&&lecture.lecture_mode!=='video'){freeLectureList.push(lecture);}});}this.setState({isAnyFree:freeLectureList.length>0,freeLectureList:freeLectureList});}toggleAudioSwitch(){console.log('switch',this.state.audioSwitch);this.setState((state:State)=>({audioSwitch:!state.audioSwitch}));}toggleAudioListDisplay(){console.log('audiolist',this.state.audioListDisplay);this.setState((state:State)=>({audioListDisplay:!state.audioListDisplay}));}closeAudioList(){this.setState({audioListDisplay:false});}setChannelAudio(id:number,mode:string){this.setState({audioId:id,audioMode:mode},()=>{console.log('更新音頻',this.state.audioId,this.state.audioMode);});}fetchChannelInfo(){lettoken=getToken();axios.get(`${Config.WK_BASE_URL}/api/channel/${this.state.id}/info`,{data:{isReset:true,isCancelLoading:true},params:{token}}).then((res)=>{const{channel,lectures,role,channel_access,stats_info,share_info}=res.data.data;setDocumentTitle();letchannelInfo:ChannelModel={...channel,is_manager:role.is_manager,is_liveroom_vip:role.is_liveroom_vip,granted:channel_access.granted,popular:stats_info.popular};letlectureList:LectureModel[]=lectures;this.hasFreeLecture(lectureList);lettab=channel_access.granted?1:0;this.setState({initialized:true,channelInfo,lectureList,tab,shareInfo:share_info},()=>{window.addEventListener('scroll',this.initTabScroll);});});}fetchProductConfig(){axios.get(`/index/product_config`,{data:{isCancelLoading:true},params:{product_type:'channel',product_id:this.state.id}}).then((res)=>{const{dist_money,share_url}=res.data.data;this.setState({dist_money,share_url});});}toggleShareMask(){this.setState({showShareMask:!this.state.showShareMask});}toggleTab(tab:number){this.setState({tab});}initTabScroll(){lettabElem=document.querySelector('.'+style.normalTab);if(tabElem&&document&&document.documentElement){this.tabOffsetTop=this.tabOffsetTop>0?this.tabOffsetTop:tabElem.getBoundingClientRect().top;letscrollTop=document.body.scrollTop||document.documentElement.scrollTop;if(scrollTop>this.tabOffsetTop+20){this.setState({isToTop:true});}else{this.setState({isToTop:false});}}}setGranted(){let{channelInfo}=this.state;channelInfo.granted=true;this.setState({channelInfo});}render(){const{tab,channelInfo,shareInfo,showShareMask}=this.state;consttabCls=this.state.isToTop?classNames(style.normalTab,style.normalTabFix):style.normalTab;constshareCls=this.state.isToTop?style.shareFix:style.shareNormal;if(!this.state.initialized){return<Loadingtype="center"/>;}return(<AccountContext.Consumer>{(value)=>(<divclassName={style.page}><Shareaccount={value.account}unsetUrl={true}shareInfo={{title:shareInfo.share_title,desc:shareInfo.share_description,img:shareInfo.share_icon,type:shareInfo.share_type,url:this.state.share_url,dataU