一、前言
樂聊是一個自己用websocket寫一個完整的應用，雖然功能比較欠缺，但是實現了基本的文字聊天，以及羣聊，私聊，機器人聊天等功能。因爲這個自己做了PC端，無線端（手機端），以及使用cordova打包成一個android的apk。實現了一個大前端的項目，雖然現在android端還是有點有問題，在修改bug。
二、websocket的原理介紹
1、爲什麼需要websocket？
因爲 HTTP 協議有一個缺陷：通信只能由客戶端發起。舉例來說，我們想了解今天的天氣，只能是客戶端向服務器發出請求，服務器返回查詢結果。HTTP 協議做不到服務器主動向客戶端推送信息。
這種單向請求的特點，註定瞭如果服務器有連續的狀態變化，客戶端要獲知就非常麻煩。我們只能使用"輪詢"：每隔一段時候，就發出一個詢問，瞭解服務器有沒有新的信息。最典型的場景就是聊天室。
輪詢的效率低，非常浪費資源（因爲必須不停連接，或者 HTTP 連接始終打開）。
2、簡介
websocket特點：服務器可以主動向客戶端推送信息，客戶端也可以主動向服務器發送信息，是真正的雙向平等對話，屬於服務器推送技術的一種。
其他特點包括：
（1）建立在 TCP 協議之上，服務器端的實現比較容易。
（2）與 HTTP 協議有着良好的兼容性。默認端口也是80和443，並且握手階段採用 HTTP 協議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務器。
（3）數據格式比較輕量，性能開銷小，通信高效。
（4）可以發送文本，也可以發送二進制數據。
（5）沒有同源限制，客戶端可以與任意服務器通信。
（6）協議標識符是ws（如果加密，則爲wss），服務器網址就是 URL。
三、websocket.io使用
1、前端
在vue項目中，在index.html中
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
<script>
// const socketWeb = io('http://localhost:3000');
const socketWeb = io('http://chat.chengxinsong.cn');
const userInfo = JSON.parse(sessionStorage.getItem("HappyChatUserInfo"))
if (userInfo) {
socketWeb.emit('update', userInfo.user_id);
}
</script>2、後端
後端是使用koa作爲後端
const app = new Koa();
const server = require("http").createServer(app.callback());
const io = require("socket.io")(server);io.on("connection", socket => {
const socketId = socket.id;
/*登錄*/
socket.on("login", async userId => {
await socketModel.saveUserSocketId(userId, socketId);
});
// 更新soketId
socket.on("update", async userId => {
await socketModel.saveUserSocketId(userId, socketId);
});
//私聊
socket.on("sendPrivateMsg", async data => {
const arr = await socketModel.getUserSocketId(data.to_user);
const RowDataPacket = arr[0];
const socketid = JSON.parse(JSON.stringify(RowDataPacket)).socketid;
io.to(socketid).emit("getPrivateMsg", data);
});
// 羣聊
socket.on("sendGroupMsg", async data => {
io.sockets.emit("getGroupMsg", data);
});
//加好友請求
socket.on("sendRequest", async data => {
console.log("sendRequest", data);
const arr = await socketModel.getUserSocketId(data.to_user);
const RowDataPacket = arr[0];
const socketid = JSON.parse(JSON.stringify(RowDataPacket)).socketid;
console.log('給誰的socketid',socketid)
io.to(socketid).emit("getresponse", data);
});
socket.on("disconnect", data => {
console.log("disconnect", data);
});
});四、簡介和功能
樂聊，一個快樂聊天的應用，支持PC端和無線端和安卓APP。
（1）PC端和無線端線上地址：http://chat.chengxinsong.cn
（2）下載安卓APP地址：暫時還有點小問題待解決，後邊放出地址
版本v 1.0.0
- 1、支持註冊用戶和郵件激活用戶；
- 2、支持登陸
- 3、支持機器人聊天；
- 4、支持加好友，一對一聊天；
- 5、支持創建羣，加羣，一對多聊天；
- 6、支持刪除好友，退出羣
- 7、支持個人信息編輯
- 8、支持添加好友備註
- 9、支持聊天中文字發送
- 10、支持瀏覽器：Chrome，Firefox，Safari，IE9及以上；
-
版本v 1.1.0
- 1、支持聊天中圖片發送
- 2、支持聊天中表情發送
- 待續
五、運行截圖
等等。。。
六、前後端源碼
前端代碼：https://github.com/saucxs/hap...
後端代碼：https://github.com/saucxs/hap...
七、最後
歡迎fork和star，有問題提issue