Maison > Article > développement back-end > Guide de développement de Golang Websocket : implémentation de la fonction d'édition en ligne pour plusieurs personnes

Guide de développement de Golang Websocket : implémentation de la fonction d'édition en ligne pour plusieurs personnes

WBOYoriginal: 2023-12-02 13:42:19652parcourir

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

Guide de développement de Golang Websocket : Implémentation d'une fonction d'édition en ligne multi-personnes

Aperçu :
Avec le développement rapide d'Internet, le développement d'applications Web a attiré de plus en plus d'attention. En particulier, certaines applications doivent implémenter la fonction d'édition collaborative en ligne par plusieurs personnes. Un moyen simple et efficace d'y parvenir consiste à utiliser Websocket.

Websocket est un protocole de communication full-duplex basé sur le protocole TCP. Il peut établir une connexion persistante entre le client et le serveur et permettre au serveur de transmettre activement des messages au client. Dans cet article, nous utiliserons Golang pour implémenter une fonction d'édition en ligne simple à plusieurs personnes afin que plusieurs utilisateurs puissent modifier le même document en même temps.

Étapes de mise en œuvre :

Initialiser un projet Golang
Avant de commencer, nous devons initialiser un projet Golang. Vous pouvez utiliser la commande suivante :
```
mkdir coedit
cd coedit
go mod init github.com/your-username/coedit
```
Installer la bibliothèque Gorilla WebSocket
Gorilla WebSocket est une excellente bibliothèque Golang pour implémenter la fonctionnalité Websocket. Nous pouvons l'installer avec la commande suivante :
```
go get github.com/gorilla/websocket
```

Créer un serveur Websocket
Tout d'abord, nous devons créer un serveur Websocket dans Golang. Créez un fichier nommé main.go et ajoutez le code suivant : 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:8000rrreee

Ce code importe d'abord les packages requis puis définit certaines variables globales. La fonction handleConnections est utilisée pour gérer les connexions Websocket et les messages qui leur sont associés. La fonction handleMessages est utilisée pour recevoir des messages du canal de diffusion et envoyer les messages à tous les clients.

Créer un fichier HTML

static

index.html

🎜Ce code crée un éditeur de texte simple utilisant la bibliothèque ace. Il crée également une connexion Websocket et met à jour le contenu de l'éditeur lorsque des messages sont reçus. Lorsque l'utilisateur modifie du texte, les modifications sont envoyées au serveur. 🎜

🎜🎜Exécutez l'application 🎜Exécutez la commande suivante dans le terminal pour démarrer l'application : 🎜rrreee🎜🎜Maintenant, vous pouvez visiter http://localhost dans votre navigateur :8000, plusieurs utilisateurs peuvent accéder à cette page en même temps et modifier de manière collaborative le même document. 🎜🎜Résumé : 🎜Cet article explique comment utiliser Golang et Websocket pour réaliser une édition collaborative en ligne à plusieurs personnes. En créant des serveurs Websocket et des pages HTML, les utilisateurs peuvent éditer et partager des documents en temps réel. Ceci n'est qu'un exemple simple, vous pouvez étendre les fonctionnalités en fonction des besoins réels et ajouter une logique côté serveur pour contrôler les autorisations d'édition entre les utilisateurs, etc. 🎜🎜 La mise en œuvre de cette manière de la fonction d'édition en ligne à plusieurs personnes peut améliorer efficacement la collaboration et les performances en temps réel, et offrir aux utilisateurs une meilleure expérience utilisateur. J'espère que cet article pourra vous aider dans le développement de Websocket et vous permettre de mieux appliquer cette technologie. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

golang html Static 全局变量 http websocket

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Guide de développement de Golang Websocket : implémentation de la fonction de blog en ligne multi-personnesArticle suivant：Guide de développement de Golang Websocket : implémentation de la fonction de blog en ligne multi-personnes

Articles Liés

Voir plus