[Go & Fiber] 채팅 시스템 구현

소스 저장소

https://github.com/WOOOOOOOONG/GO-Fiber-WebSocketChat

GitHub - WOOOOOOOONG/GO-Fiber-WebSocketChat: 웹소켓을 이용한 채팅 코드입니다.

웹소켓을 이용한 채팅 코드입니다. Contribute to WOOOOOOOONG/GO-Fiber-WebSocketChat development by creating an account on GitHub.

github.com

파일 구조

- chat.go
- public
  - chat.html

결과 화면

백엔드 코드(chat.go)

package main

import (
	"log"

	"github.com/gofiber/fiber/v2"
	"github.com/gofiber/websocket/v2"
)

func main() {
	app := fiber.New()

	app.Get("/", serveFile)
	app.Get("/ws", websocketHandler)

	log.Fatal(app.Listen(":3000"))
}

func serveFile(c *fiber.Ctx) error {
	return c.SendFile("public/chat.html")
}

func websocketHandler(c *fiber.Ctx) error {
	return websocket.New(func(conn *websocket.Conn) {
		var (
			msg string
			err error
		)
		for {
			if err = conn.ReadJSON(&msg); err != nil {
				log.Println("read:", err)
				return
			}

			log.Printf("recv: %s", msg)

			if err = conn.WriteJSON(msg); err != nil {
				log.Println("write:", err)
				return
			}
		}
	})(c)
}

프론트엔드 코드 (public/chat.html)

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Client</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    
    input {
      margin-bottom: 10px;
    }
    
    #messages {
      height: 200px;
      overflow-y: scroll;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>WebSocket Client</h1>
  
  <div>
    <label for="message">Message:</label>
    <input type="text" id="message">
    <button id="sendBtn">Send</button>
  </div>
  
  <div id="messages"></div>

  <script>
    const socket = new WebSocket("ws://localhost:3000/ws");
    const messageInput = document.getElementById("message");
    const sendBtn = document.getElementById("sendBtn");
    const messagesDiv = document.getElementById("messages");

    // 웹소켓 연결이 열린 경우
    socket.onopen = function () {
      addMessage("WebSocket connection is open.");
    };

    // 서버로부터 메시지를 받은 경우
    socket.onmessage = function (event) {
      const message = event.data;
      addMessage("Received message from server: " + message);
    };

    // 웹소켓 연결이 닫힌 경우
    socket.onclose = function () {
      addMessage("WebSocket connection is closed.");
    };

    // Send 버튼 클릭 시 메시지 전송
    sendBtn.addEventListener("click", function () {
      const message = messageInput.value;
      if (message) {
        socket.send(message);
        addMessage("Sent message to server: " + message);
        messageInput.value = "";
      }
    });

    // 메시지를 메시지 목록에 추가하는 함수
    function addMessage(message) {
      const messageElement = document.createElement("p");
      messageElement.textContent = message;
      messagesDiv.appendChild(messageElement);
    }
  </script>
</body>
</html>

실행

go run chat.go

실제 서버에서 DB 넣고 채팅 기록을 저장하면 될 것 같습니다.

그럼 오늘 하루도 좋은 하루 되십쇼!

저작자표시

'Go' 카테고리의 다른 글

[Go & Fiber] 동영상 스트리밍 구현 (0)	2023.07.02
Go & Fiber framework 설치 (0)	2023.07.02