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