轉載 Html5 + Websocket 實現的Web聊天（可羣聊）

時間 2019-11-07

標籤轉載 html5 html websocket 實現 web 聊天欄目 HTML5 简体版

原文原文鏈接

扯淡的前情提要（趕時間的小夥伴直接ctrl+f「正文」，開始閱讀）

最近公司業務須要上一個在線聊天的功能，老闆說「這個應該不難吧，用戶那邊需求挺大，咱們15號（一週後）給它上線吧」，我。。。心理雖然慌的一批，可是老闆第一次直接給工做，要留個好印象吶，得當個有情商的碼農是吧。結果情商拉滿的瞬間，智商就沒了，一個「好」字回覆的輕鬆，但是該咋整呢，我是一臉懵逼。javascript

事態發展

倒敘下，說下結果，最後功能定期上線，且沒有出任何bug，普天同慶，還得到老闆表揚。在此得特別感謝一個第三方服務產品——GoEasy，簡直是特效藥，用它的當晚我就感受本身吹出去的牛逼有救了。html

咳咳，言歸正傳，給你們說下我解決這個問題的思路。前端

大量關鍵詞搜索

IM，是我第一個想到的詞，後來一看各大廠的方案解決方案都很齊全，可是一看文檔我就懵逼了，api過於豐富，徹底就是作社交的方案，打包出來的sdk也賊大，東西一大作起來一是坑多，二是體積太大加載慢，用戶體驗很差又得反過來想辦法優化，因此拋棄之。java

Websocket，這是在看一些關於聊天和消息推送的博文中，都出現的詞，我順藤摸瓜，果真這是大多數IM的底層實現，底層意味着很輕，實現應該也不復雜。事實證實，我猜對了一半，輕確實輕，大量文章關於如何定製成我想要的功能，思路很清晰，可是我碰到了另外一個問題，就是性能和優化的問題。由於多數文章雖然都實現了部分功能，可是貌似離可穩定上Live環境需求的都差之甚遠。咱們雖然公司小，可是在線用戶高峯期仍是有400多個，並且咱們對消息時效性要求比較高，併發+時效，我擦這優化估計我研究1個月都不知道能不能出山。web

Java Websocket，隨後我開始直接聚焦本身編程語言下的具體實現了，大java人才輩出，必定會有大佬拯救個人。可我是越看越慌，有的demo我一跑還行，可一測。。。問題百出。無可奈何，我開始看第三方服務產品了，翻了一下，把大廠的廣告都忽略了，這時候就瞧到GoEasy了，很樸素的自我介紹「更簡單的Websocket」，我靠，找的就是你啊。編程

一小時搞定Demo（正文開始）

一上來我大先概瞅了一眼首頁，內容和排版都算是簡約風格。時間不等人，我立刻點「快速入門」開始整。官方說9分鐘能夠搞定，我7分鐘跑通。api

還真是tmd簡單啊，我激動的準備跟前端說一塊兒搞個小demo測試下，結果環顧四周，就我一個傻逼10點還在辦公室。好吧，寫點小html本身搞一手嘛。一陣百度事後，嘿嘿，雖然UI醜陋，js也不規範，但「實現多人在線羣聊的功能已經實現了！」，下面給你們看下截圖和代碼，代碼是純html，「50行純html實現的哦」，光這一點，你就知道這個GoEasy把websocket封裝的有多好了。websocket

<html>
<head>
<title>GoEasy Test</title>
<script type="text/javascript" src="https://cdn-hangzhou.goeasy.io/goeasy.js"></script>
  <script type="text/javascript">
       var textarea_value = document.getElementById("textarea");
    if(typeof GoEasy !== 'undefined'){
        var goEasy = new GoEasy({
            appkey: '*********'                
        });
    }    
 
    //頁面一加載就訂閱
     goEasy.subscribe({
        channel: 'demo_channel',
        onMessage: function(message){
                     if(!textarea_value) {
                            textarea_value = "";
                     }
                     textarea_value = textarea_value + message.content + "\n";
            //console.log('Meessage received:'+message.content);
                     //alert('收到：'+message.content);
                     document.getElementById("textarea").value = textarea_value;
                     
        }
    });
 
  //推送消息
    function publishMessage(){
        goEasy.publish({
            channel: 'demo_channel',
            message: document.getElementById("message").value
        });
    }          
 
   //取消訂閱的頁面不會再收到信息
    function unsubscribe(){
            goEasy.unsubscribe({
                channel:"demo_channel"
            });
    }        
  </script>
</head>
<body>
       <textarea id="textarea" rows="20" cols ="50">
       </textarea>
       <br/>
       <input type="text" id="message" />
    <input type="button" value="推送消息" onclick="publishMessage()"/>
    <input type="button" value="取消訂閱" onclick="unsubscribe()"/>
</body>
</html>

過後總結架構

互聯網發展到如今已是至關成熟了，造輪子真是很是吃力不討好的事了，至少對於我這些種初級的碼農來講。平時都是寫業務，但爲了更好的解決問題，學會使用第三方服務，也是一種新的必要能力了，能解決問題纔有核心競爭力，對前輩們作出的產品深度體驗後，經過api也會了解他們的coding設計理念，api的精妙設置背後確定是他們架構經驗的體現。併發

最後幫GoEasy打個廣告，除了產品好用，他們如今的技術支持也超級給力，那天晚上11點還給說了實現功能的思路，瞬間把我點透。

來咯，GoEasy 更簡單的WebSocket，讓咱們專一coding，WebSocket就交給他們解決吧。加油！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。