当前位置：首页 > 文章列表 > Golang > Go教程 > 在Go语言中使用WebSocket和React构建实时聊天应用程序

在Go语言中使用WebSocket和React构建实时聊天应用程序

2023-06-20 17:44:13 0浏览收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个Golang开发实战，手把手教大家学习《在Go语言中使用WebSocket和React构建实时聊天应用程序》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

随着人们对实时互动应用程序的需求增加，使用WebSocket技术构建实时聊天应用程序已成为常见的解决方案。而Go语言的轻量级和高并发性能以及React的组件化和灵活性，使它们成为构建实时聊天应用程序的理想选择。

本文将介绍如何使用WebSocket和React构建实时聊天应用程序。

构建WebSocket服务器

首先，我们需要建立一个WebSocket服务器，以便客户端可以与其建立连接并进行实时通信。使用Go语言的websocket包可以轻松实现这一点。

以下是一个基本的WebSocket服务器代码，它监听在端口8080并处理连接：

package main

import (
    "fmt"
    "net/http"
    "github.com/gorilla/websocket"
)

var upgrader = websocket.Upgrader{
    ReadBufferSize:  1024,
    WriteBufferSize: 1024,
}

func main() {
    http.HandleFunc("/ws", handleConnections)
    err := http.ListenAndServe(":8080", nil)
    if err != nil {
        fmt.Println("ListenAndServe: ", err)
    }
}

func handleConnections(w http.ResponseWriter, r *http.Request) {
    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        fmt.Println(err)
        return
    }
    defer conn.Close()
}

下一步是编写我们的WebSocket服务器的核心部分：处理来自客户端的消息并将其广播给连接的所有客户端。

我们将使用一个简单的数据结构来存储所有连接到WebSocket服务器的客户端，并使用golang的channel通道来处理客户端发送的消息。以下是处理消息的完整函数实现：

type message struct {
    Email    string `json:"email"`
    Username string `json:"username"`
    Message  string `json:"message"`
}

var clients = make(map[*websocket.Conn]bool) // connected clients
var broadcast = make(chan message)           // broadcast channel

func main() {
    // 同前面一样的代码
}

func handleConnections(w http.ResponseWriter, r *http.Request) {
    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        fmt.Println(err)
        return
    }
    defer conn.Close()

    clients[conn] = true

    for {
        var msg message
        err := conn.ReadJSON(&msg)
        if err != nil {
            fmt.Println(err)
            delete(clients, conn)
            break
        }
        broadcast <- msg
    }
}

func handleMessages() {
    for {
        msg := <-broadcast
        for client := range clients {
            err := client.WriteJSON(msg)
            if err != nil {
                fmt.Println(err)
                client.Close()
                delete(clients, client)
            }
        }
    }
}

上面的代码设置了broadcast通道，该通道接收来自handleConnections函数的消息，并将其广播给所有连接到WebSocket服务器的客户端。我们还设置了一个clients map来跟踪所有连接到服务器的客户端。

此外，在main函数中启动了一个新的goroutine来运行handleMessages函数，该函数用于处理来自broadcast通道的消息并广播给所有客户端。

构建React应用程序

现在我们有了WebSocket服务器，我们需要一个客户端应用程序来连接，并与其他人交互。这里我们使用React构建。

以下是一个最基本的React应用程序代码，用于连接WebSocket服务器并向其发送消息：

import React, { useState, useRef, useEffect } from "react";
import "./App.css";
import { w3cwebsocket as W3CWebSocket } from "websocket";

const client = new W3CWebSocket("ws://127.0.0.1:8080/ws");

function App() {
  const [messages, setMessages] = useState([]);
  const inputRef = useRef(null);

  useEffect(() => {
    client.onopen = () => {
      console.log("WebSocket Client Connected");
    };
    client.onmessage = (message) => {
      const data = JSON.parse(message.data);
      setMessages((messages) => [...messages, data]);
    };
  }, []);

  const handleSubmit = (event) => {
    event.preventDefault();
    const value = inputRef.current.value;
    if (value) {
      client.send(
        JSON.stringify({
          email: "example@mail.com",
          username: "example",
          message: value,
        })
      );
      inputRef.current.value = "";
    }
  };

  return (
    <div>
      <div className="header">Realtime Chat</div>
      <div className="messages">
        {messages.map((message, index) => (
          <div className="message" key={index}>
            <div className="sender">{message.username}</div>
            <div className="text">{message.message}</div>
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input type="text" ref={inputRef} placeholder="Type your message..." />
        <button>Send</button>
      </form>
    </div>
  );
}

export default App;

上面的代码导入了websocket模块并使用W3CWebSocket创建了一个新的WebSocket客户端，然后使用useState hook管理消息，并使用useEffect hook在组件加载时打开WebSocket连接并监听来自服务器的消息。

此外，我们使用了一个表单来允许用户发送新消息。当用户点击提交按钮时，它会将消息发送到服务器，并清除输入字段。