1、demo展示：
chat 目錄下有兩個(gè)子文件，chat_hx、chat_hx2，兩個(gè)文件代表倆個(gè)不同的用戶(hù)，除im.js中用戶(hù)配置不同其他代碼均相同，可分別點(diǎn)擊chat_hx、chat_hx2下的index.html運(yùn)行該demo，會(huì)出現(xiàn)兩個(gè)聊天界面，在此可以感受一下聊天功能。
2、demo目錄結(jié)構(gòu)：
chat_hx和chat_hx2下有 sdk、static、webrtc、im.js、index.html、main.html、pcChat.html。
sdk：目錄下為環(huán)信官方提供的聊天聊天接口，strophe-1.2.8.min.js、webim.config.js、websdk-1.4.11.js;三個(gè)文件在index.html中均需要引入，webim.config.js文件中則需要我們配置應(yīng)用的AppKey，是該應(yīng)用的唯一標(biāo)識(shí)；
- static：有css、img、js 提供聊天界面的樣式，圖片、emoji表情庫(kù)、jQuery庫(kù)、underscore庫(kù)；
- webrtc：官方提供的的rtc聊天庫(kù)，集成即時(shí)視頻功能需要引用的文件；
- index.html：手機(jī)web聊天界面入口，聊天窗口標(biāo)簽及相應(yīng)的聊天模板；
- pcChat.html：pc聊天界面，聊天窗口標(biāo)簽及相應(yīng)的聊天模板；
- main.html：pc聊天界面入口，通過(guò)iframe引入pcChat.html；
- im.js:該文件中處理了所有聊天邏輯，提供用戶(hù)登錄接口，消息收發(fā)接口，采用localStorage來(lái)做消息的本地緩存，在html文件中只需要調(diào)用具體方法即可完成聊天功能。一下為具體的調(diào)用方法：
3、緩存邏輯：
緩存采用了沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ) localStorage 存儲(chǔ)方式，以鍵值對(duì)的形式來(lái)存儲(chǔ)一個(gè)聊天組。
（1）展示聊天信息：
key:"user1:user2" 以當(dāng)前用戶(hù)名和聊天對(duì)象的用戶(hù)名作為key；
value:具體的聊天信息記錄以數(shù)組形式存在。
每次登錄后通過(guò)key來(lái)獲取緩存中的聊天記錄數(shù)組：
�。�2）接收信息的緩存處理：
接收消息將消息同樣以鍵值對(duì)（登錄用戶(hù)名：接收者用戶(hù)名）的的形式存儲(chǔ)接收到的消息，存儲(chǔ)前處理存儲(chǔ)內(nèi)容：
（3）發(fā)送消息的緩存處理：
發(fā)送的消息同樣以鍵值對(duì)的形式進(jìn)行存儲(chǔ)，同（2），圖片文件，則是通過(guò)官方提供的方法當(dāng)發(fā)送成功后會(huì)有對(duì)應(yīng)的URL返回，即將URL作為數(shù)據(jù)存入data字段即可。
4、模板：
為控制方便模板寫(xiě)了六套，及左右聊天展示個(gè)三套 分別為文本、圖片、文件。
項(xiàng)目用到的demo源碼下載請(qǐng)瀏覽器中打開(kāi)鏈接：在http://www.imgeek.org/article/825308823
