15分钟学 Go 实战项目三 : 实时聊天室（学习WebSocket并发处理）

实时聊天室：学习WebSocket并发处理

目标概述

在本项目中，我们将创建一个实时聊天室，使用Go语言和WebSocket来处理并发消息交流。这将帮助你深入理解WebSocket协议的工作原理以及如何在Go中实现并发处理。

1. 项目需求

功能需求

用户可以通过浏览器连接到聊天室。
用户能发送和接收消息。
支持多个用户同时在线聊天。
提供简单的用户界面，展示消息。

技术需求

Go语言: 用于后端服务器开发。
Gorilla WebSocket: Go语言实现的WebSocket库。
HTML/CSS/JavaScript: 用于前端界面开发。

2. 学习WebSocket

2.1 WebSocket概述

WebSocket是一种协议，允许在客户端和服务器之间建立持久性的全双工通信通道。它非常适合实时应用，如聊天应用、实时通知等。

WebSocket的优点

全双工通信：客户端和服务器可以随时互相发送数据。
低延迟：与HTTP相比，WebSocket在数据传输时会有更低的延迟。
节省资源：WebSocket连接在建立后可以保持打开状态，避免重复连接。

2.2 WebSocket协议工作流

WebSocket的建立过程如下：

客户端发送HTTP请求升级连接至WebSocket。
服务器确认并完成连接协议升级。
完成后，双方可以开始进行实时数据传输。

3. 项目结构

3.1 项目目录

chatroom/
├── main.go
├── index.html
└── styles.css

3.2 各文件功能

main.go: 服务器的主逻辑。
index.html: 客户端聊天界面。
styles.css: 界面的样式定义。

4. 代码实现

4.1 `main.go` - 服务器端实现

下面是主要的Go代码实现，包含WebSocket处理和并发支持：

package mainimport ("fmt""net/http""sync""github.com/gorilla/websocket"
)var upgrader = websocket.Upgrader{CheckOrigin: func(r *http.Request) bool {return true},
}type Client struct {conn *websocket.Connsend chan []byte
}type Hub struct {clients   map[*Client]boolbroadcast chan []bytemutex     sync.Mutex
}var hub = Hub{clients:   make(map[*Client]bool),broadcast: make(chan []byte),
}func (h *Hub) run() {for {msg := <-h.broadcasth.mutex.Lock()for client := range h.clients {select {case client.send <- msg:default:close(client.send)delete(h.clients, client)}}h.mutex.Unlock()}
}func (c *Client) read() {defer func() {hub.mutex.Lock()delete(hub.clients, c)hub.mutex.Unlock()c.conn.Close()}()for {_, msg, err := c.conn.ReadMessage()if err != nil {break}hub.broadcast <- msg}
}func (c *Client) write() {defer c.conn.Close()for msg := range c.send {if err := c.conn.WriteMessage(websocket.TextMessage, msg); err != nil {break}}
}func handleConnection(w http.ResponseWriter, r *http.Request) {conn, err := upgrader.Upgrade(w, r, nil)if err != nil {fmt.Println(err)return}client := &Client{conn: conn, send: make(chan []byte)}hub.mutex.Lock()hub.clients[client] = truehub.mutex.Unlock()go client.write()client.read()
}func main() {go hub.run()http.HandleFunc("/ws", handleConnection)http.Handle("/", http.FileServer(http.Dir("./")))fmt.Println("Server started at :8080")if err := http.ListenAndServe(":8080", nil); err != nil {fmt.Println("Error while starting the server:", err)}
}

4.2 `index.html` - 客户端实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Chat Room</title><link rel="stylesheet" href="styles.css">
</head>
<body><div id="chat-container"><div id="messages"></div><input id="message-input" type="text" placeholder="Type a message..." autocomplete="off" /><button id="send-button">Send</button></div><script>const messages = document.getElementById('messages');const input = document.getElementById('message-input');const sendButton = document.getElementById('send-button');const connection = new WebSocket('ws://' + window.location.host + '/ws');connection.onmessage = function(event) {const messageElement = document.createElement('div');messageElement.textContent = event.data;messages.appendChild(messageElement);};sendButton.onclick = function() {const message = input.value;if (message) {connection.send(message);input.value = '';}};</script>
</body>
</html>

4.3 `styles.css` - 样式定义

body {font-family: Arial, sans-serif;
}#chat-container {width: 600px;margin: 0 auto;border: 1px solid #ccc;padding: 10px;
}#messages {height: 400px;overflow-y: scroll;border: 1px solid #ccc;margin-bottom: 10px;
}#message-input {width: 80%;padding: 10px;
}#send-button {padding: 10px;
}

5. 代码运行流程图

+-------------------+
|   Start Server    |
|   (main.go)      |
+---------+---------+|v
+-------------------+
|   Handle          |
|   WebSocket       |<--------------------+
|   Connection      |                     |
+---------+---------+                     ||                               |v                               |
+---------+---------+                     |
|   Create Client   |                     |
+---------+---------+                     ||                               |v                               |
+---------+---------+                     |
|   Read Message    |                     |
+---------+---------+                     ||                               |+--------------------->---------+|v+----------+-----------+|  Broadcast Message   |+----------+-----------+|v+----------+-----------+|  Send Message to All |+----------------------+