黑科技！僅需 3 行程式碼，就能將 Gitter 整合到個人網站中，實現一個 IM 即時通訊聊天室功能？

犬小哈發表於2019-05-14

歡迎關注個人微信公眾號: 小哈學Java, 文末分享阿里 P8 高階架構師吐血總結的《Java 核心知識整理&面試.pdf》資源連結！！

個人網站: https://www.exception.site/essay/how-to-use-gitter-on-your-website-quickly

黑科技？Gitter 整合 IM 即時通訊聊天室

一、前言

小哈從很早以前就有寫博文的習慣，不過那個時候，也沒咋認真地寫，倒是挺喜歡倒騰，從最初在 CSDN 寫部落格，寫了得有 100 多篇後，那時，CSDN 開始加入了噁心的廣告，體驗開始變得極差後，就棄了 CSDN。

當時，就想著自己弄個純淨地個人部落格，於是，從 Jekyll 到 Hexo 都玩過，最終都放棄了，原因是不能隨心所欲地改成自己想要的樣式。

最後基於 Bootstrap4 搭了個前端的架子，大部分個性化 css 都是自己手寫的，於是也就有了現在的個人網站：https://www.exception.site, 網站的目的，旨在寫出一些高質量的系列教程，幫助大家在工作中速查、學習啥的。但是，就目前來說，文章的數量還是不夠，小哈在後續的日子裡，會一點點補全的，有興趣的不妨收藏一下。

好了，說了這麼多廢話，開始進入正題，由於網站沒有留言，聊天的功能，導致與很多讀者 0 溝通，粘性也就比較差。

那麼，要如何在網站中快速的整合 IM 即時通訊功能呢？

二、什麼是 Gitter？

什麼是 Gitter 呢？聽名字貌似和 GitHub 有點關係呢？

以下來之維基百科的解釋：

Gitter 是 GitHub 儲存庫的開發人員和使用者的即時通訊聊天室系統。 Gitter 作為軟體即服務提供商，提供包括免費選項和所有基本功能，以及建立單個私人聊天室的能力，和個人和組織的付費訂閱選項，允許他們建立任意數量的私人聊天室。

該服務可以為 GitHub 上的各個 Git 儲存庫建立個人聊天室。聊天室隱私遵循關聯 GitHub 儲存庫的隱私設定：因此，私有的 GitHub 儲存庫的聊天室對於訪問儲存庫的人員也是私有的。

它還可以將連線到聊天室的地址資訊放置在 git 儲存庫的 README 檔案中，以引起專案所有使用者和開發人員的注意。使用者也可以通過 GitHub 登入 Gitter 訪問他們訪問的儲存庫的私人聊天室。（注意： GitHub 密碼是不與 Gitter 共享）

Gitter 類似於 IRC 和 Slack。但與 IRC 不同的是，它像Slack一樣，會將所有聊天記錄存檔至雲端。

Gitter

三、訪問 Gitter 官網，並註冊使用者

訪問 Gitter 官方網站 https://gitter.im:

Gitter 官網

註冊使用者，這裡支援 GitLab，GitHub, Twitter 三種方式來授權登入，小哈選的是 GitHub:

Gitter 註冊

四、建立自己的 Gitter 聊天室

新增自己的Gitter聊天室

點選 ADD A ROOM 按鈕:

建立屬於你的聊天室名稱

接下來，新增一些朋友加入到你建立的聊天室吧：

新增一些使用者加入到你的聊天室

聊天室建立完成啦！

建立完成

接下來，讓我看下剛剛建立的聊天室：

聊天室都有些啥

①：聊天室名稱；
②：聊天室唯一域名（域名要記住，等下我們整合到個人網站需要）；
③：聊天室描述；

五、藉助 Sidecar 整合 gitter 到個人網站

好了，聊天室你也建立好了，怎麼整合到自己的網站咧？為了開箱即用式的整合到個人網站，我們還需要藉助一下 Sidecar, 等等！什麼是 Sidecar?

Sidecar 能夠幫助你快速便捷的整合 gitter, 僅僅需要新增幾行 javascript 程式碼即可，開箱即用，你還可以通過一些配置來自定義它。

Sidecar 官方網站為： https://sidecar.gitter.im：

Sidecar網站

將如下 javascript 程式碼，整合到個人網站中：

<script>
  ((window.gitter = {}).chat = {}).options = {
    room: 'quanxiaoha/community'
  };
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>