golang Websocket 開発ガイド: 複数人オンライン編集機能の実装-Golang-php.cn

golang Websocket 開発ガイド: 複数人オンライン編集機能の実装

WBOY

リリース： 2023-12-02 13:42:19

オリジナル

733 人が閲覧しました

golang Websocket开发指南：实现多人在线编辑功能

Golang Websocket 開発ガイド: 複数人オンライン編集機能の実装

概要:
インターネットの急速な発展に伴い、Web アプリケーションの開発はますます重要になっています。ますます人気が高まっています。特に、アプリケーションによってはオンライン上で複数人で共同編集する機能を実装する必要があるため、Websocket を利用するのが簡単かつ効果的です。

Websocket は、TCP プロトコルに基づく全二重通信プロトコルで、クライアントとサーバーの間に永続的な接続を確立し、サーバーがクライアントにメッセージをアクティブにプッシュできるようにします。この記事では、Golang を使用して、複数のユーザーが同じドキュメントを同時に編集できる、簡単な複数人オンライン編集機能を実装します。

実装手順:

Golang プロジェクトの初期化
開始する前に、Golang プロジェクトを初期化する必要があります。次のコマンドを使用できます。
```
mkdir coedit
cd coedit
go mod init github.com/your-username/coedit
```
ログイン後にコピー
Gorilla WebSocket ライブラリのインストール
Gorilla WebSocket は、WebSocket 機能の実装に使用される優れた Golang ライブラリです。次のコマンドでインストールできます:
```
go get github.com/gorilla/websocket
```
ログイン後にコピー

Websocket サーバーの作成
まず、Golang で Websocket サーバーを作成する必要があります。 main.go という名前のファイルを作成し、次のコードを追加します。

package main

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

var (
 clients   = make(map[*websocket.Conn]bool) //保存所有连接的客户端
 broadcast = make(chan []byte)              //广播消息的通道
 upgrader  = websocket.Upgrader{}           //升级器
)

func main() {
 fs := http.FileServer(http.Dir("static"))
 http.Handle("/", fs)

 // 当有新的websocket请求时，升级连接，并处理收到的消息
 http.HandleFunc("/ws", handleConnections)

 // 启动广播器
 go handleMessages()

 log.Println("Server started on :8000")
 log.Fatal(http.ListenAndServe(":8000", nil))
}

func handleConnections(w http.ResponseWriter, r *http.Request) {
 //升级请求并检查错误
 ws, err := upgrader.Upgrade(w, r, nil)
 if err != nil {
     log.Println(err)
     return
 }
 //关闭连接
 defer ws.Close()

 //注册新的客户端
 clients[ws] = true

 for {
     var msg []byte
     //读取消息并检查错误
     _, msg, err = ws.ReadMessage()
     if err != nil {
         log.Println(err)
         delete(clients, ws)
         break
     }
     //将消息发送到广播通道
     broadcast <- msg
 }
}

func handleMessages() {
 for {
     //从广播通道中读取消息
     msg := <-broadcast
     //向客户端发送消息
     for client := range clients {
         err := client.WriteMessage(websocket.TextMessage, msg)
         if err != nil {
             log.Println(err)
             client.Close()
             delete(clients, client)
         }
     }
 }
}

ログイン後にコピー

このコードは、最初に必要なパッケージをインポートし、次にいくつかのグローバル変数を定義します。 handleConnectionsこの関数は、Websocket 接続とそれに関連付けられたメッセージを処理するために使用されます。 handleMessagesこの関数は、ブロードキャストチャネルからメッセージを受信し、すべてのクライアントにメッセージを送信するために使用されます。

HTML ファイルの作成
プロジェクトのルートディレクトリに static という名前のフォルダーを作成し、次に index.html という名前のフォルダーを作成します。ファイルを開き、次のコードを追加します。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>CoEdit Online Editor</title>
 <style>
     #editor {
         width: 100%;
         height: 500px;
         font-size: 14px;
         line-height: 18px;
     }
 </style>
</head>
<body>
 <div id="editor"></div>
 <script>
     var socket = new WebSocket("ws://localhost:8000/ws");
     var editor = ace.edit("editor");

     editor.setTheme("ace/theme/twilight");
     editor.getSession().setMode("ace/mode/javascript");

     socket.onmessage = function(event) {
         editor.setValue(event.data);
     };

     editor.on("input", function() {
         socket.send(editor.getValue());
     });
 </script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ace.js"></script>
</body>
</html>

ログイン後にコピー

このコードは、ace ライブラリを使用して単純なテキストエディタを作成します。また、WebSocket 接続を作成し、メッセージの受信時にエディターのコンテンツを更新します。ユーザーがテキストを編集すると、変更内容がサーバーに送信されます。

アプリケーションの実行
ターミナルで次のコマンドを実行してアプリケーションを開始します:
```
go run main.go
```
ログイン後にコピー

これで、次の場所でアクセスできるようになります。ブラウザ http://localhost:8000 では、複数のユーザーが同時にこのページに入り、同じドキュメントを共同編集できます。

概要:
この記事では、Golang と Websocket を使用して、複数人でのオンライン共同編集を実現する方法を紹介します。 Websocket サーバーと HTML ページを作成することで、ユーザーはドキュメントをリアルタイムで編集および共有できます。これは単なる例であり、実際のニーズに応じて機能を拡張したり、サーバー側にロジックを追加してユーザー間の編集権限を制御したりすることができます。

この方法で複数人によるオンライン編集機能を実装すると、コラボレーションとリアルタイムパフォーマンスが効果的に強化され、ユーザーエクスペリエンスが向上します。この記事が Websocket 開発に役立ち、このテクノロジをより適切に適用できるようになることを願っています。

以上がgolang Websocket 開発ガイド: 複数人オンライン編集機能の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。