演示視頻
注意：視頻是之前錄製的，所以沒有發送語音的演示
1.介紹
Springboot+websocket+vue的小聊天
2.軟件架構
Springboot、websocket、vue、MySQL
3.安裝教程
1.首先拉取拉取代碼
git pull https://gitee.com/zyy_dawn/spring_boot_vue_chat.git
2.將項目中聊天圖片中的chat文件夾拷貝到D盤下面(這是springboot中配置的虛擬訪問路徑，其他盤符下也可以，但是需要修改)
3.將項目中的數據庫文件夾下的chat.sql導入到MySQL數據庫，數據庫名稱為chat。
4.使用idea打開項目，運行項目
5.從數據庫的userinfo表中選擇一個userid（最好是SY1571476959767947449），然後在一個瀏覽器中訪問：localhost:8080/tochat/SY1571476959767947449然後再選擇一個userid，最好是（SY1571476959767947441），然後在另一個瀏覽器中訪問：localhost:8080/tochat/SY1571476959767947441選擇這兩個userid的原因是數據庫初始數據讓這兩人互為好友了。
4.項目接口
1、/chat/upimg
這個接口就是聊天圖片上傳的的接口
2、/chat/{fuserid}
這個接口是加好友用的，傳入一個用戶id，判斷當前用戶和當前登錄的用戶是否是好友，如果是直接跳轉到接口：/chat（目前這個接口已經刪除，這個接口就是單純跳轉到聊天界面）
3、/tochat/{uid}
這個接口是目前跳轉到聊天界面的，因為沒有登錄界面，所以直接用這個接口傳入一個用戶id，然後在此接口中將此用戶id存儲到session，作為登錄用戶的id。
4、/chat/lkfriends
這個接口就是單純的查詢當前登錄用戶的好友列表的接口
5、/chat/lkuschatmsg/{reviceuserid}
這個接口是查詢兩個用戶之間的聊天信息的接口，傳入用戶的userid，查詢當前登錄用戶和該用戶的聊天記錄。
6、/chat/audio
這個接口是Ajax上傳web界面js錄製的音頻數據用的接口
5.項目說明
此項目為一個聊天的小demo，採用springboot+websocket+vue開發。
其中有一個接口為添加好友接口，添加好友會判斷是否已經是好友。
聊天的時候：A給B發送消息如果B的聊天窗口不是A，則B處會提醒A發來一條消息。
聊天內容的輸入框採用layui的富文本編輯器，目前不支持回車發送內容。
聊天可以發送圖片，圖片默認存儲在D:/chat/目錄下。
點擊聊天內容中的圖片會彈出預覽，這個預覽彈出此條消息中的所有圖片。
在發送語音的時候，語音默認發送給當前聊天窗口的用戶，所以錄製語音的時候務必保證當前聊天窗口有選擇的用戶。
6、更新日誌
· 2020-03-02
· 增加發送語音的功能
· 2019-12-21
· 增加接口的講解
· 2019-12-16
· 聊天小Demp上線
7、打賞
聊天項目，製作不易，如果對您有幫助，還請轉發、點贊、加關注。
另外親，互加友鏈嗎？我的博客網站：https://toptech.top
閱讀更多 理木客 的文章
