摘要知識貯藏在謙虛的大海中。在物質越來越充實的年代，知識方面的匱乏反而越來越突出。因此，網上慕課或是網上書籍應運而生。在國外，“微課程”概念最早是由美國戴維首創的。而在微課的持續發展過程中，國外對于微課程的研究拓展于不同的各個方面。在國內，由于流媒體的發展，微課程成為了一個里程碑級的產物。在這個產品中，用戶可以在網上選擇自己感興趣或是想要了解的課程，隨時隨地聽課學習。軟件分為兩個主頁面，商城頁面以及用戶信息頁面。商城頁面為專欄、課程的列表，具備搜索功能；用戶信息頁面為用戶個人信息的展示。在搭建工程之前，首先要捋清楚該產品的整體框架、各個模塊之間的關系以及繪制出所需的后臺數據庫、整理各個變量之間的關系等。本書首先介紹了H5網絡課程的發展前景以及現狀，其次分析了開發該平臺所需要用到的技術，如react.js、websocket、typescript等，其中react.js為本次開發的主技術棧。接著是各個頁面、模塊的單獨介紹，首先是樣式（截圖展示），而后將頁面內較為重要的模塊單獨拎出來講解實現的主要技術以及步驟。為了方面展示，在本產品中特意將錄像源以及展示源安置在同一個頁面內以便觀察現象。直播實現所需要的技術websocket是本書的一個重點，它需要客戶端以及服務器端兩邊的配合，websocket可以認為是http協議的升級版本，兩者沒有必要的聯系。最后即是在前端頁面開發過程中所遇到的、容易遇到的問題，如頁面兼容性、頁面性能等，本書也進行了詳細的總結。關鍵詞：網絡課程，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網絡微課平臺的意義對于愛好學習、想要時時對知識充充電的人來說，只有課下一個學習形式是很不夠的，不僅路途遙遠而且時間上有的可能也安排不過來。所以在網絡異常發達的今天，我們應該充分利用網絡的優勢，讓學習、讀書變得更加容易。近年來，網上慕課的興起相信很多學校的學生以及老師都有所了解，由此基礎上，很多企業都爭相效仿開發出一系列微課app，如樂兒思、千聊、荔枝微課等等。在這些平臺上，人們可以根據自己的意愿選擇想要聽什么課、不想要聽什么課。不僅如此，這些軟件還有一個特點就是“三人行，人人皆可為師”。只要你有可以跟眾多網友分享的經驗或是知識，都可以自己單獨開一門課程上傳到平臺上，如果平臺判定你的課程是有價值的、值得傳播的還會幫你包裝、推廣出去。由此可看出，微課這一類app是近幾年的大熱，而在這個“求賢若渴”的時代，抓住群眾的心理，通過一些渠道或是活動營銷方法把一些有價值的課程推銷出去是一個很好的商機。1.2微課平臺的現狀《國家中長期教育改革和發展規劃綱要（2010-2020年）》和《教育信息化十年發展規劃（2011-2020年）》兩個文件都明確指出：要將教育信息化納入國家信息化發展整體戰略，要充分發揮現代信息技術優勢，注重信息技術和教育的全面深度融合。這為微課提供了政策支持。以下為目前幾個微課平臺的簡略介紹：（1）荔枝微課：荔枝微課是一個大眾皆可用的知識、生活常識等互相交流的平臺。在荔枝微課里，每個人都可以創建課程并分享你所想要告訴聽眾的知識，同樣也可以點開課程入口聽課學習。平臺支持零門檻開課，支持微信公眾號、APP和電腦多種方式聽課開課，擁有語音、圖片、PPT、視頻、音頻等多種講課模式。該平臺開課豐富多樣，包含自我成長、情感關系、職場提升、投資理財、育兒教育等各個方面[2]。（2）千聊：千聊由騰訊眾創空間孵化，是國內領先的在線知識社區，是一個專注于知識分享的平臺，通過直播的形式讓您直接找到各個領域的專家、老師、達人[3]。在該平臺上，用戶們可以進行在線互動、交流，互相討論學術或是觀點。當然，也可以對自己感興趣的課程進行購買，隨時回聽回看、重溫課程，鞏固知識。1.3微課平臺應用前景展望在網絡不斷發展的這個時代，微課平臺將與虎牙直播、微博、facebook等這一類平臺一樣，具有十分廣闊的應用前景。對于教師來說，這是一個很大的教學方式上的改革，突破了一直以來傳統的、受限的聽課、授課形式，可以隨時隨地聽課、授課，使得課程更加具備針對性以及時效性，是傳統課堂的一個資源拓展和重要補充。雖說網絡授課形式無法取代傳統授課形式，但是這兩種授課形式在當今時代是相輔相成的，目前也已有許多學校以及教師運用網絡課程來輔助教學。網絡課程不僅可以補充課堂上的各種知識，也可以補充課外的知識，讓學生不再是只會單純的學習語數英的“書呆子”，而是在生活上也能夠學會做個“聰明人”。相信在不久后，網絡授課的形式將會越來越受歡迎，應用也將會越廣泛。1.4本章小結本章主要對微課平臺類軟件的意義進行了一番詳細討論，對微課平臺的發展現狀以及應用前景做了基本的介紹。下一章將對如何構建微課平臺的大致架構設計思路以及模塊做詳細的解說。

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

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

4課程展示4.1商城頁面在商城頁面中，主要包含搜索欄、海報部分、推薦課程部分、浮窗部分，點擊即可進入相應的課程或是活動頁面進行聽課、購買等操作。由于主頁的推薦課程經常變動，所以相應的文本或是圖片均為后臺配置，可減少后期頁面改動時前端的工作量。樣式如下圖所示：圖4.1商城頁面樣式4.2搜索功能在眾多的課程里面，如何讓用戶能夠快速定位到自己感興趣的課程呢？在這個時候，搜索功能是必不可少的。搜索的實現主要思路就是在課程數據庫中利用相似查找、關鍵字查找等方法，將名字符合搜索條件的課程陳列下來，供用戶選擇。如此一來，能夠減少很多用戶查找的時間以及精力，使得用戶體驗感更佳。搜索頁面的樣式如下：圖4.2搜索頁面眾所周知，百度搜索引擎是通過GET請求實現搜索功能的，最淺顯的表現就在于在頁面url上“佩戴”搜索參數。搜索框中根據用戶輸入的關鍵字，發起請求時請求路徑為當前頁面路徑‘/search’。該搜索功能主要利用springmvc框架以及mybatis實現，可以對指定的關鍵字進行搜索。MyBatis支持普通SQL查詢，存儲過程和高級映射。控制層代碼如下：@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";}當搜索結果過多時，為了摒棄舊時“上一頁”、“下一頁”的分頁模式，我們采用監聽頁面滾動的方法來進行懶加載，在react中使用觸發事件實現如部分代碼如下：<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專欄頁面一系列課程構成一個專欄，在商城中點擊某個具體課程專欄即可進入專欄頁面。頁面內主要包含海報部分、課程介紹部分以及課程目錄部分，如下圖所示：圖4.3專欄頁面在專欄頁面中，重點部分是底部的“試聽”功能。試聽時運用的是html5新增的audio標簽，主要技術難點在于播放進度條的樣式以及拖動控制播放進度功能的實現。由于主要是手機端展示的頁面，所以拖動事件的監聽主要是依賴手機端的觸摸事件，由ontouchstart、ontouchmove、ontouchend一類，而拖動進度條的具體長度依賴于clientX、offsetX等。點擊“試聽”按鈕之后，試聽列表以及播放進度條樣式如下圖所示：圖4.4試聽列表界面試聽部分代碼展示見附錄。4.4本章小結本章中，主要介紹了商城展示頁面、點擊相應課程所進入的專欄頁面和搜索功能的頁面樣式以及相應代碼。在本章所介紹的各個頁面中，主要是前端排版、樣式的工作量以及搜索功能方面的邏輯代碼的實現。在下一章中，將介紹最主要的直播功能實現所需要的技術。

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

運行結果當運行后臺代碼時，監聽到用戶接入行為以及客戶端傳入的數據，后臺顯示如下圖所示：圖5.3后臺數據傳輸當用戶斷開連接時，后臺顯示如下圖所示：圖5.4斷開連接顯示

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

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

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

參考文獻高湧.微課現狀分析——以南京曉莊學院為例[D].南京：南京曉莊學院， 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.

致謝本設計（論文）是在我的指導老師兼班主任李光平老師的親切關懷和悉心指導下完成的。他嚴肅的科學態度、嚴謹的治學精神、精益求精的工作作風，深深地感染和激勵著我。從題目的選擇到最終完成，老師都始終給予我細心的指導和不懈的支持。大學生涯最重要的兩年，我遇到了李光平老師，您治學嚴謹，學識淵博，對每一個學生都盡心盡力的去教導，在我們即將邁進社會之際給予了我們非常大的幫助，為我們營造了一種良好的精神氛圍。授人以魚不如授人以漁，置身其間，耳濡目染，潛移默化，使我接受了全新的思想觀念，樹立了宏偉的學術目標，領會了基本的思考方式。四年的大學生涯即將畫上一個句號，但對于我來說只是人生的一個逗號，我將帶著四年里在大學學到的知識踏入社會，開啟新的征程。感謝大學里的每一位同學，謝謝你們一直以來給我的支持和鼓勵，讓我的大學生活變得豐富多彩，從你們每個人的身上，我都學習了很多東西。最后，感謝陪同我走了四年的信息工程學院。特別感謝在百忙之中審閱我論文的專家教授和參加答辯的各位老師，請允許我在這里向你們致以最真誠的祝福。附錄試聽功能部分代碼如下：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