WebSocket前端和服务器端代码

前端代码

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>WebSocket</title>

    <script type="text/javascript">
        function WebSocketTest() {
     
     
            if ("WebSocket" in window) {
     
     
                alert("您的浏览器支持 WebSocket!");

                // 打开一个 web socket
                var ws = new WebSocket("ws://127.0.0.1:8800/ws");
                // 参数ws://127.0.0.1:8800/ws是需要连接的服务器端的地址

                ws.onopen = function () {
     
     
                    console.log("open");
                    ws.send("hello");
                };

                ws.onmessage = function (evt) {
     
     
                    alert(evt.data);
                };

                ws.onclose = function (evt) {
     
     

                    console.log("WebSocketClosed!");

                };

                ws.onerror = function (evt) {
     
     

                    console.log("WebSocketError!");

                };
            }
            else {
     
     
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
            }
        }
    </script>

</head>

<body>

    <div id="sse">
        <a href="javascript:WebSocketTest()">运行 WebSocket</a>
    </div>

</body>

</html>

服务器端代码（Go语言）

package main

import (
	"fmt"
	"net/http"

	"github.com/gorilla/websocket"
	"github.com/labstack/echo"
	"github.com/labstack/echo/middleware"
)

var (
	upgrader = websocket.Upgrader{
    
    }
)

func main() {
    
    
	e := echo.New()
	// e.Use(middleware.Logger())
	e.Use(middleware.Recover())
	e.Static("/", "./")
	e.GET("/hello", func(c echo.Context) error {
    
    
		return c.String(http.StatusOK, "Hello, World!")
	})
	e.GET("/echo", getEcho)
	e.POST("/echo", postEcho)

	e.GET("/list", func(c echo.Context) error {
    
    
		type Camera struct {
    
    
			ID   string `json:"id"`
			Name string `json:"name"`
			Num  int    `json:"num"`
		}

		type List struct {
    
    
			List []Camera `json:"list"`
		}

		list := new(List)
		c1 := Camera{
    
    "001", "camera1", 10}
		c2 := Camera{
    
    "002", "camera2", 20}
		c3 := Camera{
    
    "003", "camera3", 30}
		list.List = append(list.List, c1)
		list.List = append(list.List, c2)
		list.List = append(list.List, c3)

		return c.JSON(http.StatusCreated, list)
	})

	e.GET("/ws", wsEcho)

	e.Logger.Fatal(e.Start(":8800"))
}

func wsEcho(c echo.Context) error {
    
    
	ws, err := upgrader.Upgrade(c.Response(), c.Request(), nil)
	if err != nil {
    
    
		return err
	}
	defer ws.Close()

	// Write
	err = ws.WriteMessage(websocket.TextMessage, []byte("Hello, Client!"))
	if err != nil {
    
    
		c.Logger().Error(err)
	}

	for {
    
    
		// Read
		_, msg, err := ws.ReadMessage()
		if err != nil {
    
    
			c.Logger().Error(err)
		}
		fmt.Printf("wsEcho:%s\n", msg)

		// Write
		err = ws.WriteMessage(websocket.TextMessage, []byte(msg))
		if err != nil {
    
    
			c.Logger().Error(err)
		}
	}
}

// get url /echo?str="xxxxx"
func getEcho(c echo.Context) error {
    
    
	str := c.QueryParam("str")
	return c.String(http.StatusOK, str)
}

// post url /echo with body form value "str"
func postEcho(c echo.Context) error {
    
    
	str := c.FormValue("str")
	return c.String(http.StatusOK, str)
}

WebSocket前端和服务器端代码

前端代码

服务器端代码（Go语言）

猜你喜欢