golangのWebsocketを使ってオンラインホワイトボード機能を開発する方法-Golang-php.cn

ホームページ

バックエンド開発

Golang

golangのWebsocketを使ってオンラインホワイトボード機能を開発する方法

王林

Dec 02, 2023 am 10:12 AM

golang websocket オンラインホワイトボード

golangのWebsocketを使ってオンラインホワイトボード機能を開発する方法

golang の Websocket を使用してオンラインホワイトボード機能を開発する方法

はじめに:

今日のインターネット時代では、オンラインコラボレーションツールがますます増えています。発展した。中でもオンラインホワイトボードは、ユーザーが同じページ上でリアルタイムに絵を描いたり書き込んだりできる非常に実用的なツールです。この記事では、golangのWebsocketを使って簡単なオンラインホワイトボード機能を開発する方法と具体的なコード例を紹介します。

Websocket の概要:

Websocket は、単一の TCP 接続を介した全二重通信用のプロトコルです。従来の HTTP リクエスト/レスポンスモデルとは異なり、Websocket を使用すると、サーバーがアクティブにデータをクライアントにプッシュして、リアルタイムの双方向通信を実現できます。オンラインホワイトボード機能を開発したとき、Websocket はまさにニーズを満たしていました。

開発環境:

開始する前に、golang と関連ライブラリが開発環境にインストールされていることを確認してください。この記事では、Websocket ライブラリとして github.com/gorilla/websocket を使用します。

実装手順:

依存ライブラリのインストール

ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行して Websocket ライブラリをインストールします:

go get github.com/gorilla/websocket

ログイン後にコピー

プロジェクトの初期化

まず、プロジェクトのルートディレクトリとして空のフォルダーを作成します。次に、そのディレクトリに main.go という名前のファイルを作成します。このファイルにはメインコードが含まれます。

main.go ファイルで、必要なライブラリとパッケージをインポートします。

package main

import (
    "log"
    "net/http"

    "github.com/gorilla/websocket"
)

ログイン後にコピー

Websocket プロセッサの作成

Websocket 接続を処理するには、次のようにします。プロセッサを実装する必要があります。次のコードを main.go ファイルに追加します。

var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool {
        return true
    },
}

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

    // 在此处编写逻辑来处理前端发送过来的事件和数据
}

ログイン後にコピー

このコードでは、グローバル websocket.Upgrader オブジェクトを作成して、HTTP 接続を Websocket 接続にアップグレードします。 websocketHandler 関数では、upgrader オブジェクトを使用して接続をアップグレードし、後続のデータ交換ロジックを処理します。

Websocket サーバーの開始

main 関数では、作成した websocketHandler 関数を http 処理関数として登録し、指定されたポートをリッスンする必要があります。次のコードを main.go ファイルに追加します。

func main() {
    http.HandleFunc("/ws", websocketHandler)
    err := http.ListenAndServe(":8000", nil)
    if err != nil {
        log.Fatal("Websocket server error:", err)
    }
}

ログイン後にコピー

このコードでは、websocketHandler 関数を Websocket プロセッサとして処理パス /ws に登録します。次に、http.ListenAndServe 関数を使用してポート 8000 をリッスンし、Websocket サーバーを開始します。

フロントエンドページ

この簡単な例では、HTML と JavaScript を使用してフロントエンドページを実装します。プロジェクトのルートディレクトリに、index.html というファイルを作成し、次のコードを追加します。

<!DOCTYPE html>
<html>
<head>
    <title>在线白板</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>

    <script>
        var ws = new WebSocket("ws://localhost:8000/ws");
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        ws.onopen = function() {
            console.log('Websocket连接已建立');
        };

        ws.onmessage = function(e) {
            var data = JSON.parse(e.data);

            // 处理从服务器端发送过来的数据
        };

        ws.onclose = function() {
            console.log('Websocket连接已关闭');
        };

        // 在此处添加绘图逻辑
    </script>
</body>
</html>

ログイン後にコピー

このコードでは、描画用の Canvas 要素を作成します。次に、WebSocket オブジェクトを使用してサーバーとの接続を確立し、open、message、および close イベントの処理を追加します。これらのイベントハンドラーでは、サーバーから送信されたデータを処理するロジックを作成できます。

最後に、プロジェクトのルートディレクトリで go run main.go コマンドを実行し、ブラウザでindex.html ファイルを開いて、開発したオンラインホワイトボード機能を体験します。

概要:

この記事では、golang の Websocket ライブラリを使用して簡単なオンラインホワイトボード機能を開発する方法を紹介し、具体的なコード例を示します。この記事を読むことで、Websocket 接続の処理方法、サーバーからのデータの受信と処理方法、フロントエンドページでの画像の描画方法を学ぶことができます。この記事があなたの学習と成長に役立つことを願っています。

以上がgolangのWebsocketを使ってオンラインホワイトボード機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1663

CakePHP チュートリアル

1420

Laravel チュートリアル

1313

PHP チュートリアル

1266

C# チュートリアル

1239

Related knowledge

Golang を使用してファイルを安全に読み書きするにはどうすればよいですか? Jun 06, 2024 pm 05:14 PM

Go ではファイルを安全に読み書きすることが重要です。ガイドラインには以下が含まれます。ファイル権限の確認遅延を使用してファイルを閉じるファイルパスの検証コンテキストタイムアウトの使用これらのガイドラインに従うことで、データのセキュリティとアプリケーションの堅牢性が確保されます。

Golang データベース接続用の接続プールを構成するにはどうすればよいですか? Jun 06, 2024 am 11:21 AM

Go データベース接続の接続プーリングを構成するにはどうすればよいですか?データベース接続を作成するには、database/sql パッケージの DB タイプを使用します。同時接続の最大数を制御するには、MaxOpenConns を設定します。アイドル状態の接続の最大数を設定するには、ConnMaxLifetime を設定します。

GolangでJSONデータをデータベースに保存するにはどうすればよいですか? Jun 06, 2024 am 11:24 AM

JSON データは、gjson ライブラリまたは json.Unmarshal 関数を使用して MySQL データベースに保存できます。 gjson ライブラリは、JSON フィールドを解析するための便利なメソッドを提供します。json.Unmarshal 関数には、JSON データをアンマーシャリングするためのターゲット型ポインターが必要です。どちらの方法でも、SQL ステートメントを準備し、データをデータベースに永続化するために挿入操作を実行する必要があります。

Golang フレームワークと Go フレームワーク: 内部アーキテクチャと外部機能の比較 Jun 06, 2024 pm 12:37 PM

GoLang フレームワークと Go フレームワークの違いは、内部アーキテクチャと外部機能に反映されています。 GoLang フレームワークは Go 標準ライブラリに基づいてその機能を拡張していますが、Go フレームワークは特定の目的を達成するための独立したライブラリで構成されています。 GoLang フレームワークはより柔軟であり、Go フレームワークは使いやすいです。 GoLang フレームワークはパフォーマンスの点でわずかに優れており、Go フレームワークはよりスケーラブルです。ケース: gin-gonic (Go フレームワーク) は REST API の構築に使用され、Echo (GoLang フレームワーク) は Web アプリケーションの構築に使用されます。

フロントエンドからバックエンドの開発に変身すると、JavaやGolangを学ぶことはより有望ですか？ Apr 02, 2025 am 09:12 AM

バックエンド学習パス：フロントエンドからバックエンドへの探査の旅は、フロントエンド開発から変わるバックエンド初心者として、すでにNodeJSの基盤を持っています...

Golang フレームワーク開発実践チュートリアル: FAQ Jun 06, 2024 am 11:02 AM

Go フレームワーク開発 FAQ: フレームワークの選択: アプリケーションの要件と開発者の好み (Gin (API)、Echo (拡張可能)、Beego (ORM)、Iris (パフォーマンス) など) によって異なります。インストールと使用: gomod コマンドを使用して、フレームワークをインストールし、インポートして使用します。データベース対話: gorm などの ORM ライブラリを使用して、データベース接続と操作を確立します。認証と認可: gin-contrib/sessions などのセッション管理および認証ミドルウェアを使用します。実際のケース: Pin フレームワークを使用して、POST、GET、その他の関数を提供する単純なブログ API を構築します。

Golang の正規表現に一致する最初の部分文字列を見つけるにはどうすればよいですか? Jun 06, 2024 am 10:51 AM

FindStringSubmatch 関数は、正規表現に一致する最初の部分文字列を検索します。この関数は、最初の要素が一致した文字列全体で、後続の要素が個々の部分文字列である、一致する部分文字列を含むスライスを返します。コード例: regexp.FindStringSubmatch(text,pattern) は、一致する部分文字列のスライスを返します。実際のケース: 電子メールアドレスのドメイン名を照合するために使用できます。たとえば、email:="user@example.com", pattern:=@([^\s]+)$ を使用してドメイン名を照合します。 [1]。