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

news2024/11/13 10:41:00

实时聊天室：学习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 main

import (
	"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.Conn
	send chan []byte
}

type Hub struct {
	clients   map[*Client]bool
	broadcast chan []byte
	mutex     sync.Mutex
}

var hub = Hub{
	clients:   make(map[*Client]bool),
	broadcast: make(chan []byte),
}

func (h *Hub) run() {
	for {
		msg := <-h.broadcast
		h.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] = true
	hub.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 |
                    +----------------------+