如何使用Go語言開發Websocket聊天室-Golang-PHP中文網

如何使用Go語言開發Websocket聊天室

PHPz

發布： 2023-12-14 13:46:50

原創

870 人瀏覽過

如何使用Go語言開發Websocket聊天室

Websocket是一種即時通訊協議，透過建立一次連接，可以在伺服器和客戶端之間進行雙向通信。在開發聊天室時，Websocket是一個非常好的選擇，因為它可以實現即時訊息交流，並且能夠提供高效的效能。本文將介紹如何使用Go語言開發一個簡單的Websocket聊天室，並提供一些具體的程式碼範例。

一、準備工作

1.安裝Go語言環境

在開始之前，首先需要安裝Go語言環境。 Go語言的官方網站（https://golang.org/）上提供了各個平台的安裝包，可以根據自己的作業系統下載並安裝。

2.安裝websocket庫

在Go語言中，使用「github.com/gorilla/websocket」套件提供了與WebSocket相關的功能。可以透過以下命令來安裝該套件：

go get github.com/gorilla/websocket

二、建立聊天室伺服器

首先，我們需要建立一個簡單的伺服器，用於處理Websocket連線的建立和訊息的收發。

package main

import (
    "fmt"
    "log"
    "net/http"

    "github.com/gorilla/websocket"
)

var clients = make(map[*websocket.Conn]bool) // 存储连接的客户端
var broadcast = make(chan Message)           // 消息广播通道

// 定义消息结构体
type Message struct {
    Username string `json:"username"`
    Message  string `json:"message"`
}

func main() {
    http.HandleFunc("/ws", handleConnections)

    go handleMessages()

    // 启动服务器
    log.Println("服务器启动，监听端口：8080")
    err := http.ListenAndServe(":8080", nil)
    if err != nil {
        log.Fatal("ListenAndServe: ", err)
    }
}

func handleConnections(w http.ResponseWriter, r *http.Request) {
    // 升级HTTP连接为Websocket连接
    ws, err := websocket.Upgrade(w, r, nil, 1024, 1024)
    if err != nil {
        log.Fatal(err)
    }

    // 关闭连接
    defer ws.Close()

    // 将客户端连接添加到clients映射中
    clients[ws] = true

    for {
        var msg Message
        // 读取客户端发送的消息
        err := ws.ReadJSON(&msg)
        if err != nil {
            log.Printf("读取消息错误：%v", err)
            delete(clients, ws)
            break
        }

        // 将接收到的消息放入广播通道中
        broadcast <- msg
    }
}

func handleMessages() {
    for {
        // 从广播通道中读取消息
        msg := <-broadcast

        // 遍历所有连接的客户端，将消息发送给每个客户端
        for client := range clients {
            err := client.WriteJSON(msg)
            if err != nil {
                log.Printf("发送消息错误：%v", err)
                client.Close()
                delete(clients, client)
            }
        }
    }
}

登入後複製

以上程式碼建立了一個簡單的Websocket聊天室伺服器。在handleConnections函數中，我們將接收到的訊息放入廣播頻道中。 handleMessages函數從廣播頻道讀取訊息，並將訊息傳送給所有連接的用戶端。

三、建立前端介面

接下來，我們需要建立一個前端介面，用於使用者輸入使用者名稱和訊息，並即時顯示聊天內容。

<!doctype html>
<html>

<head>
  <title>Websocket 聊天室</title>
  
  <style>
    #message-box {
      height: 500px;
      overflow-y: scroll;
    }
  </style>
</head>

<body>
  <h1>Websocket 聊天室</h1>

  <div id="message-box"></div>

  <form id="message-form" onsubmit="sendMessage(event)">
    <input type="text" id="username" placeholder="请输入用户名" required>
    <br />
    <input type="text" id="message" placeholder="请输入消息" required>
    <br />
    <button type="submit">发送</button>
  </form>

  <script>
    const socket = new WebSocket("ws://localhost:8080/ws");

    socket.onmessage = function (event) {
      const data = JSON.parse(event.data);
      const messageBox = document.getElementById("message-box");
      const messageElement = document.createElement("p");
      messageElement.innerText = data.username + ": " + data.message;
      messageBox.appendChild(messageElement);
    };

    function sendMessage(event) {
      event.preventDefault();

      const username = document.getElementById("username").value;
      const message = document.getElementById("message").value;

      const data = {
        username: username,
        message: message
      };

      socket.send(JSON.stringify(data));
      document.getElementById("message").value = "";
    }
  </script>
</body>

</html>

登入後複製

以上程式碼建立了一個簡單的HTML介面，包含一個使用者名稱輸入框、一個訊息輸入框和一個傳送按鈕。透過socket.onmessage處理接收到的訊息，並將訊息顯示在訊息盒子中。透過socket.send發送輸入的訊息。

四、執行程式

在終端機中進入專案目錄，執行下列命令啟動伺服器：