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