Panduan Pembangunan Soket Web golang: Melaksanakan fungsi penyuntingan dalam talian berbilang orang-Golang-php.cn

Panduan Pembangunan Soket Web golang: Melaksanakan fungsi penyuntingan dalam talian berbilang orang

WBOY

Lepaskan： 2023-12-02 13:42:19

asal

667 orang telah melayarinya

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

Panduan Pembangunan Soket Web Golang: Melaksanakan Fungsi Penyuntingan Dalam Talian Berbilang Orang

Gambaran Keseluruhan:
Dengan perkembangan pesat Internet, pembangunan aplikasi Web telah menarik lebih banyak perhatian. Khususnya, sesetengah aplikasi perlu melaksanakan fungsi penyuntingan kolaboratif dalam talian oleh berbilang orang Cara yang mudah dan berkesan untuk mencapai ini adalah dengan menggunakan Websocket.

Websocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP Ia boleh mewujudkan sambungan berterusan antara pelanggan dan pelayan dan membolehkan pelayan menolak mesej secara aktif kepada pelanggan. Dalam artikel ini, kami akan menggunakan Golang untuk melaksanakan fungsi pengeditan dalam talian berbilang orang yang mudah supaya berbilang pengguna boleh mengedit dokumen yang sama pada masa yang sama.

Langkah pelaksanaan:

Memulakan projek Golang
Sebelum kita memulakan, kita perlu memulakan projek Golang. Anda boleh menggunakan arahan berikut:
```
mkdir coedit
cd coedit
go mod init github.com/your-username/coedit
```
Salin selepas log masuk
Pasang perpustakaan WebSocket Gorilla
Gorilla WebSocket ialah perpustakaan Golang yang sangat baik untuk melaksanakan fungsi Websocket. Kita boleh memasangnya dengan arahan berikut:
```
go get github.com/gorilla/websocket
```
Salin selepas log masuk

Buat pelayan Websocket
Pertama, kita perlu mencipta pelayan Websocket di Golang. Buat fail bernama main.go dan tambahkan kod berikut: 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)
         }
     }
 }
}

Salin selepas log masuk

这段代码首先导入了需要的包，然后定义了一些全局变量。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>

Salin selepas log masuk

这段代码创建了一个简单的文本编辑器，使用了ace库。它还创建了一个Websocket连接，并在接收到消息时更新编辑器的内容。在用户编辑文本时，会将更改的内容发送到服务器。

运行应用程序
在终端中运行以下命令，启动应用程序：
```
go run main.go
```
Salin selepas log masuk

现在，可以在浏览器中访问http://localhost:8000rrreee

Kod ini mula-mula mengimport pakej yang diperlukan dan kemudian mentakrifkan beberapa pembolehubah global. Fungsi handleConnections digunakan untuk mengendalikan sambungan Websocket dan mesej yang dikaitkan dengannya. Fungsi handleMessages digunakan untuk menerima mesej daripada saluran siaran dan menghantar mesej kepada semua pelanggan.

Buat fail HTML

static

index.html

🎜Kod ini mencipta editor teks mudah menggunakan pustaka ace. Ia juga mencipta sambungan Websocket dan mengemas kini kandungan editor apabila mesej diterima. Apabila pengguna mengedit teks, perubahan dihantar ke pelayan. 🎜

🎜🎜Jalankan aplikasi 🎜Jalankan arahan berikut dalam terminal untuk memulakan aplikasi: 🎜rrreee🎜🎜Sekarang, anda boleh melawati http://localhost dalam pelayar :8000, berbilang pengguna boleh memasuki halaman ini pada masa yang sama dan secara kolaboratif mengedit dokumen yang sama. 🎜🎜Ringkasan: 🎜Artikel ini memperkenalkan kaedah menggunakan Golang dan Websocket untuk mencapai penyuntingan kolaboratif dalam talian berbilang orang. Dengan mencipta pelayan Websocket dan halaman HTML, pengguna boleh mengedit dan berkongsi dokumen dalam masa nyata. Ini hanyalah contoh mudah, anda boleh melanjutkan fungsi mengikut keperluan sebenar dan menambah beberapa logik pada bahagian pelayan untuk mengawal kebenaran mengedit antara pengguna, dsb. 🎜🎜 Melaksanakan fungsi penyuntingan dalam talian berbilang orang dengan cara ini boleh meningkatkan kerjasama dan prestasi masa nyata dengan berkesan, serta memberikan pengguna pengalaman pengguna yang lebih baik. Saya harap artikel ini dapat membantu anda dalam pembangunan Websocket dan membolehkan anda menggunakan teknologi ini dengan lebih baik. 🎜

Atas ialah kandungan terperinci Panduan Pembangunan Soket Web golang: Melaksanakan fungsi penyuntingan dalam talian berbilang orang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!