woann-chat 基於 laravelS 和 layim 的聊天系統

woann-chat是一個基於LaravelS和Layim編寫的聊天系統。

專案地址：https://github.com/woann/chat

演示地址：http://chat.woann.cn （測試賬號同安裝中的測試賬號同步）

依賴	說明
PHP	>= 7.2 推薦7.2
Swoole	>= 4.2.9 從2.0.12開始不再支援PHP5 推薦4.2.9+
LaravelS	>=3.3.9 LaravelS是一個將swoole和laravel框架結合起來的膠水工具

宣告

• 此專案是基於LaravelS作為服務端，所以在此之前，你要熟悉swoole、laravel、還有將他們完美結合的LaravelShttps://github.com/hhxsv5/laravel-s
• 前端部分是採用layui,在此鄭重說明，layui中的im部分layim並不開源，僅供交流學習，請勿將此專案中的layim用作商業用途。
• 此專案持續開發中，歡迎有興趣的朋友共同維護

功能列表

• 登入 | 沒什麼好說的...
• 註冊 | 註冊過程中為使用者分配了一個預設分組，並將使用者新增到所有人都在的一個群（10001）
• 查詢-新增好友 | 可以根據使用者名稱、暱稱、id來查詢，不輸入內容則查詢所有使用者，點選發起好友申請
• 查詢-加入群 | 可根據群暱稱、群id查詢群聊，點選加入
• 建立群 | 建立一個群聊
• 訊息盒子 | 用來接受好友請求和同意或拒絕好友請求的系統訊息
• 個性簽名 | 並沒有什麼卵用的功能
• 一對一聊天 | 可傳送文字、表情、圖片、檔案、程式碼等
• 群聊 | 新成員加入群聊時，如果此刻你正開啟著該群對話方塊，將收到新人入群通知
• 檢視群成員
• 臨時會話 | 在群成員中，點選群成員頭像即可發起臨時會話
• 歷史記錄 | 聊天皮膚只顯示20條記錄，更多記錄點選聊天記錄檢視
• 離線訊息 | 對方不線上的時候，向對方發起好友請求或者訊息，將在對方上線後第一時間推送
• 換膚 | 這個是layim自帶的東西。。
• ...

安裝

• 執行安裝命令git clone https://github.com/woann/chat將專案克隆到本地
• 匯入sql，專案根目錄下有個woann_chat.sql檔案，將該sql檔案匯入資料庫即可
• 修改.env檔案，按照你的資料庫賬號密碼進行配置
• 執行laravelS php bin/laravels start
• 此時訪問127.0.0.1:9501即可進入登入頁面
• 測試賬號 test01 - test04 密碼全是123456，當然你也可以自行註冊。

配合nginx使用

• nginx配置檔案

  map $http_upgrade $connection_upgrade {
  default upgrade;
  ''      close;
  }
  upstream laravels {
  # 通過 IP:Port 連線
  server 127.0.0.1:9501 weight=5 max_fails=3 fail_timeout=30s;
  # 通過 UnixSocket Stream 連線，小訣竅：將socket檔案放在/dev/shm目錄下，可獲得更好的效能
  #server unix:/xxxpath/laravel-s-test/storage/laravels.sock weight=5 max_fails=3 fail_timeout=30s;
  #server 192.168.1.1:5200 weight=3 max_fails=3 fail_timeout=30s;
  #server 192.168.1.2:5200 backup;
  keepalive 16;
  }
  server {
  listen 80;
  # 別忘了綁Host喲
  server_name xxx.com;#在這裡配置域名
  root /xxx/woann-chat/public;#在這裡配置檔案目錄
  access_log /yyypath/log/nginx/$server_name.access.log;
  autoindex off;
  index index.html index.htm;
  # Nginx處理靜態資源(建議開啟gzip)，LaravelS處理動態資源。
  location / {
      try_files $uri @laravels;
  }
  # 當請求PHP檔案時直接響應404，防止暴露public/*.php
  #location ~* \.php$ {
  #    return 404;
  #}
  # Http和WebSocket共存，Nginx通過location區分
  # !!! WebSocket連線時路徑為/ws
  # Javascript: var ws = new WebSocket("ws://xxx.com/ws");
  location =/ws {
      # proxy_connect_timeout 60s;
      # proxy_send_timeout 60s;
      # proxy_read_timeout：如果60秒內被代理的伺服器沒有響應資料給Nginx，那麼Nginx會關閉當前連線；同時，Swoole的心跳設定也會影響連線的關閉
      # proxy_read_timeout 60s;
      proxy_http_version 1.1;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Real-PORT $remote_port;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header Scheme $scheme;
      proxy_set_header Server-Protocol $server_protocol;
      proxy_set_header Server-Name $server_name;
      proxy_set_header Server-Addr $server_addr;
      proxy_set_header Server-Port $server_port;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection $connection_upgrade;
      proxy_pass http://laravels;
  }
  location @laravels {
      # proxy_connect_timeout 60s;
      # proxy_send_timeout 60s;
      # proxy_read_timeout 60s;
      proxy_http_version 1.1;
      proxy_set_header Connection "";
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Real-PORT $remote_port;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header Scheme $scheme;
      proxy_set_header Server-Protocol $server_protocol;
      proxy_set_header Server-Name $server_name;
      proxy_set_header Server-Addr $server_addr;
      proxy_set_header Server-Port $server_port;
      proxy_pass http://laravels;
  }
  }

• 將resources/view/index.blade.php檔案中簡歷websocket中的

  socket = new WebSocket('ws://127.0.0.1:9501?sessionid={{ $sessionid }}');

  替換成

  socket = new WebSocket('ws://xxx.com/ws?sessionid={{ $sessionid }}');

待完成

• 後臺管理
• ...

部分截圖

• 主介面
  

• 收到訊息
  

• 聊天介面
  

• 新增好友
  

• 加入群
  

• 同意新增
  

• 群聊
  

• 訊息盒子
  

• 聊天記錄