happyChat開發系列：使用websocket.io實現雙向通訊的樂聊大前端開發

1、前言

樂聊是一個本身用websocket寫一個完整的應用，雖然功能比較欠缺，可是實現了基本的文字聊天，以及羣聊，私聊，機器人聊天等功能。由於這個本身作了PC端，無線端（手機端），以及使用cordova打包成一個android的apk。實現了一個大前端的項目，雖然如今android端仍是有點有問題，在修改bug。

2、websocket的原理介紹

一、爲何須要websocket？

由於 HTTP 協議有一個缺陷：通訊只能由客戶端發起。舉例來講，咱們想了解今天的天氣，只能是客戶端向服務器發出請求，服務器返回查詢結果。HTTP 協議作不到服務器主動向客戶端推送信息。

這種單向請求的特色，註定了若是服務器有連續的狀態變化，客戶端要獲知就很是麻煩。咱們只能使用"輪詢"：每隔一段時候，就發出一個詢問，瞭解服務器有沒有新的信息。最典型的場景就是聊天室。

輪詢的效率低，很是浪費資源（由於必須不停鏈接，或者 HTTP 鏈接始終打開）。

二、簡介

websocket特色：服務器能夠主動向客戶端推送信息，客戶端也能夠主動向服務器發送信息，是真正的雙向平等對話，屬於服務器推送技術的一種。

其餘特色包括：

（1）創建在 TCP 協議之上，服務器端的實現比較容易。

（2）與 HTTP 協議有着良好的兼容性。默認端口也是80和443，而且握手階段採用 HTTP 協議，所以握手時不容易屏蔽，能經過各類 HTTP 代理服務器。

（3）數據格式比較輕量，性能開銷小，通訊高效。

（4）能夠發送文本，也能夠發送二進制數據。

（5）沒有同源限制，客戶端能夠與任意服務器通訊。

（6）協議標識符是ws（若是加密，則爲wss），服務器網址就是 URL。

3、websocket.io使用

一、前端

在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>

二、後端

後端是使用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);
    });
});

4、簡介和功能

樂聊，一個快樂聊天的應用，支持PC端和無線端和安卓APP。

（1）PC端和無線端線上地址：http://chat.chengxinsong.cn

（2）下載安卓APP地址：暫時還有點小問題待解決，後邊放出地址

版本v 1.0.0

- 一、支持註冊用戶和郵件激活用戶；
- 二、支持登錄
- 三、支持機器人聊天；
- 四、支持加好友，一對一聊天；
- 五、支持建立羣，加羣，一對多聊天；
- 六、支持刪除好友，退出羣
- 七、支持我的信息編輯
- 八、支持添加好友備註
- 九、支持聊天中文字發送
- 十、支持瀏覽器：Chrome，Firefox，Safari，IE9及以上；

• 版本v 1.1.0

  • 一、支持聊天中圖片發送
  • 二、支持聊天中表情發送
  • 待續

5、運行截圖

等等。。。

6、先後端源碼

前端代碼：https://github.com/saucxs/hap...

後端代碼：https://github.com/saucxs/hap...

7、最後

歡迎fork和star，有問題提issue