320x100
소스 저장소
https://github.com/WOOOOOOOONG/GO-Fiber-WebSocketChat
파일 구조
- 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 넣고 채팅 기록을 저장하면 될 것 같습니다.
그럼 오늘 하루도 좋은 하루 되십쇼!
320x100
'Go' 카테고리의 다른 글
[Go & Fiber] 동영상 스트리밍 구현 (0) | 2023.07.02 |
---|---|
Go & Fiber framework 설치 (0) | 2023.07.02 |