使用到的東西都會列在下方

## 使用套件cdn
sockjs:
https://github.com/sockjs/sockjs-client
stompjs:
https://github.com/stomp-js/stompjs

# github :
https://github.com/Phoenix-0921/chatroom
後端
https://github.com/Phoenix-0921/chatroomup
前端

## 聊天頁面
https://codepen.io/Varo/pen/YPmwpQ
內含html,css
https://freefrontend.com/css-chats/
chat UI 2.0

# 發想

我現在想做一個匿名聊天室
我按下配對後會發送一個隨機ＩＤ到後端去做匹配
等到下一個按下配對的人後
他會取得我的隨機ＩＤ
然後創建一個table 把我們的ID,聊天內容,時間戳記加到資料庫
當其中有一個人按下離開的時候會刪除這個table

我會用vue+css 來解決前端, 用java 來寫後端 mysql 來製作資料庫
### GPT 給我的回應

使用者介面：首先，你需要設計一個使用者介面，讓使用者可以進入聊天室、輸入訊息並查看其他使用者的訊息。你可以使用 HTML、CSS 和 JavaScript 來建立網頁介面。

前端程式碼：使用 JavaScript 或者其他前端框架，你需要處理使用者的輸入、顯示訊息，並與後端進行通訊。

後端程式碼：你需要建立一個後端伺服器，來處理使用者之間的通訊。你可以使用 Node.js、Python 等程式語言來建立伺服器。

資料庫：為了儲存使用者的訊息、連線資訊等，你需要選擇一個資料庫系統，例如 MySQL、MongoDB 等。

隨機匿名配對：這是整個專案的核心功能。當使用者進入聊天室時，你需要將他們隨機匿名地配對起來，讓他們可以開始聊天。

聊天功能：建立使用者之間的即時聊天功能，讓配對的兩個使用者可以互相傳送訊息。

匿名性：確保聊天室中的使用者能夠保持匿名，不要顯示真實的名稱或資訊。

安全性：考慮到使用者的安全，你需要實施一些機制，例如過濾不當的言語、防止濫用等。

部署：最後，你需要將你的網站部署到一個適合的伺服器上，讓其他使用者可以訪問你的隨機匿名聊天室。

## 套件
我裝了幾個套件

$ yarn add axios
$ yarn add stompjs
$ yarn add sockjs-client

遇到了問題
需要在後端設定跨域
`setAllowedOrigins(http://localhost:5173)`
不可使用(*)全域設定上限須在更改測試

## 想法

我會需要利用資料庫做配對方式
1. 第一個人點下連接
會發送CookieID和WebsocketID到後端資料庫等待連接
第二個人點下連接會先去資料庫做配對
2. 若有人在等待連接則取得WebsocketID連接後刪除表格
並寫入下一個資料表
將雙方CookieID,訊息內容,WebsockID留下做紀錄
除非點開斷開連接,不然下次重開網頁,也會去抓資料庫把內容還原
PS.這個功能好像要先做才去做連接不然會連不回去
3. 若斷開連接後會把此筆資料刪除以防資料庫資料過多

## GPT回應

感謝進一步說明你的需求！根據你的描述，確實需要使用資料庫來處理使用者之間的配對和連接，並保留聊天記錄。下面是我們可以進行的修改和建議：

資料庫設計：根據你的需求，建議建立兩個資料表，一個用於存儲使用者的 WebSocket ID 和 Cookie ID 的配對，另一個用於存儲聊天記錄。

CREATE TABLE user_connections (
    id INT AUTO_INCREMENT PRIMARY KEY,
    cookie_id VARCHAR(255) NOT NULL,
    websocket_id VARCHAR(255) NOT NULL
);

CREATE TABLE chat_records (
    id INT AUTO_INCREMENT PRIMARY KEY,
    sender_cookie_id VARCHAR(255) NOT NULL,
    receiver_cookie_id VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

RandomChatRoomService 修改：修改 matchUsers 方法，新增方法用於處理斷開連接並刪除配對資料。

public void matchUsers(String cookieID, String webSocketID) {
    // 將使用者的 WebSocket ID 和 Cookie ID 關聯存入資料庫的 user_connections 表
    addUserConnection(cookieID, webSocketID);

    // 查詢資料庫，尋找與目前使用者不同且未被匹配的使用者
    String matchedWebSocketID = getMatchedWebSocketID(cookieID);

    if (matchedWebSocketID != null) {
        // 找到匹配的使用者，建立連接，並刪除配對資料
        addUserConnection(matchedWebSocketID, webSocketID);
        removeMatchedUser(matchedWebSocketID);
        removeMatchedUser(cookieID);

        // 在這裡執行將用戶進行匿名聊天的相關邏輯
        System.out.println("用戶 " + cookieID + " 和用戶 " + matchedWebSocketID + " 成功匹配，可以進行匿名聊天！");
    } else {
        System.out.println("目前找不到足夠的用戶進行配對，請稍後再試。");
    }
}

private void addUserConnection(String cookieID, String webSocketID) {
    // 在這裡執行將 cookieID 和 webSocketID 儲存到 user_connections 資料表的邏輯
}

private String getMatchedWebSocketID(String cookieID) {
    // 在這裡執行查詢 user_connections 資料表的邏輯，找到匹配的使用者的 WebSocket ID
    return null;
}

private void removeMatchedUser(String cookieID) {
    // 在這裡執行刪除 user_connections 資料表中特定 cookieID 的資料的邏輯
}

CharRoomController 修改：在 WebSocket 連接斷開時，將聊天記錄寫入資料庫。

@MessageMapping("/messageControl")
@SendTo("/topic/getResponse")
@CrossOrigin(value = "*") // 允許跨域請求
public ServerResponseModel said(ChatClientModel request) throws InterruptedException {
    Thread.sleep(3000);
    String responseMessage = request.getMessage();
    saveChatRecord(request.getSenderCookieID(), request.getReceiverCookieID(), responseMessage);
    return new ServerResponseModel(responseMessage);
}

private void saveChatRecord(String senderCookieID, String receiverCookieID, String content) {
    // 在這裡執行將聊天記錄儲存到 chat_records 資料表的邏輯
}

RandomChatRoomController 修改：新增一個方法處理斷開連接。

// 新增一個 API 來處理斷開連接，並刪除使用者連接資料
@PostMapping("/chat/disconnect")
@CrossOrigin(value = "*")
public ResponseEntity<String> disconnectUser(@RequestParam String cookieID) {
    randomChatRoomService.removeMatchedUser(cookieID);
    return ResponseEntity.ok("已斷開連接，資料已刪除。");
}

前端程式碼修改：新增一個 API 來處理斷開連接的請求，並在用戶主動斷開連接時調用此 API。

// 在 RandomChatRoomService 中新增一個方法
disconnect() {
  axios.post("http://localhost:8080/chat/disconnect", { cookieID: this.cookieID })
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
}

然後在前端的 Vue 組件中，調用 disconnect 方法，例如在點選斷開連接的按鈕時。

這樣修改後，使用者點選連接後，將 Cookie ID 和 WebSocket ID 傳送到後端進行配對，匹配成功後會建立一對一連接，並將聊天記錄寫入資料庫。當使用者主動點選斷開連接時，後端會刪除該使用者的連接資料，以防資料庫資料過多。

希望這些修改能夠幫助你實現所需的功能！如果你有任何進一步的問題，請隨時向我詢問。祝你順利完成專案！