最近呢，深思自己雖然了解過websocket，但是一直沒去實踐承璃，很難發(fā)現(xiàn)問題框往，更別說解決問題。所以呢胖翰，趁著還沒上班，先打個聊天室玩一玩。
先放個最終成果鏈接：布局有點丑江耀，網(wǎng)速有點慢（但都不是重點）
還有一個github地址：github
正文開始！Ｋ咧病祥国！
一、開發(fā)環(huán)境
我這里采用nodejs為后臺，使用的包有express舌稀、http啊犬、fs、以及關(guān)鍵包 socket.io壁查。而前端則不采用框架觉至，直接就是原生js加css，需要引用到socket.io.js文件睡腿，該文件在npm i socket.io完成后语御，可以在node_modules下找到，舉個栗子嫉到，我是在服務(wù)端\node_modules\_socket.io-client@2.1.1@socket.io-client\dist的路徑下找到的沃暗。
二、服務(wù)器和瀏覽器互通消息
為了使用websocket何恶，在后臺和前端都需要初始化socket對象孽锥，然后通過自帶的on方法進行事件監(jiān)聽，emit方法進行事件注冊细层。
在進行消息的互通前需要建立連接：
在瀏覽器和服務(wù)器連接成功后惜辑，就可以書寫消息接收操作，比如說當(dāng)用戶登錄發(fā)現(xiàn)昵稱已被占用疫赎，
和其他事件一樣盛撑，function是可以帶值傳輸?shù)模梢岳眠@個值發(fā)送消息捧搞，圖片數(shù)據(jù)等等抵卫。
三、發(fā)送圖片
發(fā)送圖片可以通過將圖片轉(zhuǎn)化成base64的方式胎撇，進行發(fā)送介粘。
四、小技巧
由于是聊天室晚树，可以先將表情包預(yù)加載姻采，這樣在發(fā)送表情包的時候僅僅需要發(fā)送圖片的地址，并且由于預(yù)加載原因聊天十分順暢爵憎，但是如果是發(fā)送圖片的話慨亲，就有點弱了，因為socket只在接受圖片完畢才響應(yīng)事件宝鼓，所以更好的解決方法時在發(fā)圖片的時候先發(fā)一段文字信息刑棵，通知其他人有人發(fā)圖片啦 ！Ｓ拚 铐望！
結(jié)束語
?目前這個聊天室還不完善，在之后我會慢慢地加入一些新功能的。謝謝觀看啦正蛙。
