大家看看華為商城的客服系統(tǒng)，有沒有想過到底是如何制作出來的。你和客服MM的一問一答到底是如何實(shí)現(xiàn)的？學(xué)過ajax的朋友肯定知道，可以使用輪詢方式，隔一秒到服務(wù)器里面去查詢是否有聊天信息的到來，如果有，就取出來。這樣肯定是可以的。但是這樣做服務(wù)器壓力實(shí)在太大。如果有很多人在聊天呢？服務(wù)器可能受不了，所以，我們今天來使用WebSocket技術(shù)。該技術(shù)的特別之處在于，與HTTP協(xié)議最大的不同是，HTTP協(xié)議需要請(qǐng)求一次，響應(yīng)一次。而WebSocket使用的是協(xié)議是，一次握手，時(shí)時(shí)通訊。意思就是，第一次采用http協(xié)議握手完成之后，后面的鏈接就一直會(huì)保持，服務(wù)器也可以向客戶端發(fā)送信息。而不再是單向的通訊方式了。
華為客服系統(tǒng)
當(dāng)然，制作這個(gè)客服聊天系統(tǒng)確實(shí)不容易，但是如果我們只想做個(gè)簡(jiǎn)單的網(wǎng)頁聊天那還是沒有問題的。
接下來，我給大家貼出一些關(guān)鍵代碼，給大家演示如何開發(fā)出一個(gè)網(wǎng)頁聊天系統(tǒng)。
必備技能：
html，css，JAVAScript，java，javaWeb，Tomcat服務(wù)器，數(shù)據(jù)庫(kù)MySQL。
1 首頁，必須寫一個(gè)登陸頁面，如果沒有登錄功能，那么網(wǎng)頁對(duì)方就不知道你的身份了。大部分情況都是需要登錄的。當(dāng)然如果不登錄，也是可以的，系統(tǒng)可以給你指定一個(gè)稱呼，目前大多數(shù)客服系統(tǒng)都是 有登錄的。
登錄代碼
登錄界面
登錄使用的是jquery的ajax向servlet發(fā)送請(qǐng)求，servlet調(diào)用數(shù)據(jù)庫(kù)dao查詢是否存在賬號(hào)。這個(gè)步驟如果不會(huì)的話，那需要將JavaScript和javaWeb學(xué)習(xí)一遍。
2 寫一個(gè)聊天的界面，這個(gè)界面代碼較多，但是大家可以去各種素材網(wǎng)站找模板，不用自己寫的，copy就行了。
登錄后的界面
webSocket代碼
后臺(tái)，我們采用的是java代碼。這里因?yàn)槭侨腴T，我們沒有采用spring框架，而是采用了最基本的webSocket包。這兩個(gè)包可以在tomcat文件夾下面的lib文件夾找到。
使用的包
前后臺(tái)通訊方式采用的是json方式。所以引入了Gson包。
數(shù)據(jù)庫(kù)使用了兩個(gè)表：
非常簡(jiǎn)單的表，mysql可以直接使用
后臺(tái)部分代碼
主要使用的是@ServerEndpoint注解，以及@OnOpen@OnMessage注解。
@ServerEndpoint注解表示ws的路徑。
@OnOpen表示連接時(shí)觸發(fā)該方法
@OnMessage 表示服務(wù)器收到消息時(shí)觸發(fā)
聊天時(shí)可以發(fā)送圖片和表情
發(fā)送圖片文件采用的方式還是http方式。
將發(fā)送人和接收人和文件使用FormData封裝起來，然后使用ajax保存到服務(wù)器中。然后再將服務(wù)器保存的地址發(fā)給對(duì)方。
聊天系統(tǒng)沒有加密。只是簡(jiǎn)單的制作。有興趣的可以私聊我，可以發(fā)源代碼給你，因?yàn)槠脚_(tái)限制，不能在文章發(fā)鏈接，見諒了。
