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

ホームページ

バックエンド開発

Golang

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

王林

Dec 02, 2023 am 10:12 AM

golangwebsocketオンラインホワイトボード

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 までご連絡ください。

go语言有没有缩进Dec 01, 2022 pm 06:54 PM

go语言有缩进。在go语言中，缩进直接使用gofmt工具格式化即可（gofmt使用tab进行缩进）；gofmt工具会以标准样式的缩进和垂直对齐方式对源代码进行格式化，甚至必要情况下注释也会重新格式化。

go语言为什么叫goNov 28, 2022 pm 06:19 PM

go语言叫go的原因：想表达这门语言的运行速度、开发速度、学习速度（develop）都像gopher一样快。gopher是一种生活在加拿大的小动物，go的吉祥物就是这个小动物，它的中文名叫做囊地鼠，它们最大的特点就是挖洞速度特别快，当然可能不止是挖洞啦。

聊聊Golang中的几种常用基本数据类型Jun 30, 2022 am 11:34 AM

本篇文章带大家了解一下golang 的几种常用的基本数据类型，如整型，浮点型，字符，字符串，布尔型等，并介绍了一些常用的类型转换操作。

一文详解Go中的并发【20 张动图演示】Sep 08, 2022 am 10:48 AM

Go语言中各种并发模式看起来是怎样的？下面本篇文章就通过20 张动图为你演示 Go 并发，希望对大家有所帮助！

tidb是go语言么Dec 02, 2022 pm 06:24 PM

是，TiDB采用go语言编写。TiDB是一个分布式NewSQL数据库；它支持水平弹性扩展、ACID事务、标准SQL、MySQL语法和MySQL协议，具有数据强一致的高可用特性。TiDB架构中的PD储存了集群的元信息，如key在哪个TiKV节点；PD还负责集群的负载均衡以及数据分片等。PD通过内嵌etcd来支持数据分布和容错；PD采用go语言编写。