概述

对于 golang 的 web 开发, 之前写过 2 篇 blog, 分别介绍了:

  1. 在 Gin 框架下, 各类 http API 的开发方法(包括文件上传, 下载等) golang Web 方案
  2. Gin 框架下反向代理的使用: 反向代理的使用

这里再给之前的 Web 方案中加上 Websocket 的部分, 基本就能涵盖日常开发所需的所有接口类型了.

golang websocket 库

这里使用的 websocket 库来自 Gorilla web toolkit

下面用代码来演示如何在 Gin 框架中结合 websocket API

示例

后端

后端提供 2 种 API, 分别支持 text 格式和 json 格式的消息 示例中的 API 每次收到消息后, 返回 10 次

  1  package main
2
3 import (
4 "log"
5 "net/http"
6 "strconv"
7 "time"
8
9 "github.com/gin-contrib/static"
10 "github.com/gin-gonic/gin"
11 "github.com/gorilla/websocket"
12 )
13
14 var upGrader = websocket.Upgrader{
15 CheckOrigin: func(r *http.Request) bool {
16 return true
17 },
18 }
19
20 // webSocket返回text 格式
21 func textApi(c *gin.Context) {
22 //升级get请求为webSocket协议
23 ws, err := upGrader.Upgrade(c.Writer, c.Request, nil)
24 if err != nil {
25 log.Println("error get connection")
26 log.Fatal(err)
27 }
28 defer ws.Close()
29 //读取ws中的数据
30 mt, message, err := ws.ReadMessage()
31 if err != nil {
32 log.Println("error read message")
33 log.Fatal(err)
34 }
35
36 //写入ws数据, pong 10 times
37 var count = 0
38 for {
39 count++
40 if count > 10 {
41 break
42 }
43
44 message = []byte(string(message) + " " + strconv.Itoa(count))
45 err = ws.WriteMessage(mt, message)
46 if err != nil {
47 log.Println("error write message: " + err.Error())
48 }
49 time.Sleep(1 * time.Second)
50 }
51 }
52
53 //webSocket返回 json格式
54 func jsonApi(c *gin.Context) {
55 //升级get请求为webSocket协议
56 ws, err := upGrader.Upgrade(c.Writer, c.Request, nil)
57 if err != nil {
58 log.Println("error get connection")
59 log.Fatal(err)
60 }
61 defer ws.Close()
62 var data struct {
63 A string `json:"a"`
64 B int `json:"b"`
65 }
66 //读取ws中的数据
67 err = ws.ReadJSON(&data)
68 if err != nil {
69 log.Println("error read json")
70 log.Fatal(err)
71 }
72
73 //写入ws数据, pong 10 times
74 var count = 0
75 for {
76 count++
77 if count > 10 {
78 break
79 }
80
81 err = ws.WriteJSON(struct {
82 A string `json:"a"`
83 B int `json:"b"`
84 C int `json:"c"`
85 }{
86 A: data.A,
87 B: data.B,
88 C: count,
89 })
90 if err != nil {
91 log.Println("error write json: " + err.Error())
92 }
93 time.Sleep(1 * time.Second)
94 }
95 }
96
97 func websocketGin() {
98 r := gin.Default()
99 r.GET("/json", jsonApi)
100 r.GET("/text", textApi)
101
102 // static files
103 r.Use(static.Serve("/", static.LocalFile("./public", true)))
104
105 r.NoRoute(func(c *gin.Context) {
106 c.File("./public/index.html")
107 })
108
109 r.Run(":8000")
110 }

后端代码中有个静态文件的路由 r.Use(static.Serve("/", static.LocalFile("./public", true)))

只要将下面的前端代码命名为 index.html 并放在和后端代码根目录下的 public 文件夹中,

就可以在启动后端之后, 直接通过访问 *http://localhost:8000" 来显示页面了

前端

前端很简单, 就是在页面初始化完成后创建 websocket 连接, 然后发送消息并显示接受到的消息

 1  <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>index</title>
6 </head>
7 <body>
8 <h1>test websocket</h1>
9 <p id="message-json"></p>
10 <p id="message-text"></p>
11 <script>
12 function jsonWS() {
13 var ws = new WebSocket("ws://localhost:8000/json");
14 //连接打开时触发
15 ws.onopen = function (evt) {
16 console.log("Connection open ...");
17 var obj = { a: "bb", b: 2 };
18 ws.send(JSON.stringify(obj));
19 };
20 //接收到消息时触发
21 ws.onmessage = function (evt) {
22 console.log("Received Message: " + evt.data);
23 document.getElementById("message-json").innerText += evt.data;
24 };
25 //连接关闭时触发
26 ws.onclose = function (evt) {
27 console.log("Connection closed.");
28 };
29 }
30
31 function textWS() {
32 var ws = new WebSocket("ws://localhost:8000/text");
33 //连接打开时触发
34 ws.onopen = function (evt) {
35 console.log("Connection open ...");
36 ws.send("text message");
37 };
38 //接收到消息时触发
39 ws.onmessage = function (evt) {
40 console.log("Received Message: " + evt.data);
41 document.getElementById("message-text").innerText = evt.data;
42 };
43 //连接关闭时触发
44 ws.onclose = function (evt) {
45 console.log("Connection closed.");
46 };
47 }
48 // 启动 websocket
49 jsonWS();
50 textWS();
51 </script>
52 </body>
53 </html>

结论

运行之后, 就可以看到页面上显示的 message 了, 发送一次信息, 会收到 10 条返回.

golang Gin framework with websocket的更多相关文章

  1. Golang Gin 项目包依赖管理 godep 使用

    Golang Gin 项目包依赖管理 godep 使用 标签(空格分隔): Go 在按照github.com/tools/godep文档go get完包以后,调整项目结构为$GOPATH/src/$P ...

  2. Golang Gin 项目使用 Swagger

    Golang Gin 项目使用 Swagger 标签(空格分隔): Go 首先需要github.com/swaggo/gin-swagger和github.com/swaggo/gin-swagger ...

  3. Golang Gin实践 番外 请入门 Makefile

    Golang Gin实践 番外 请入门 Makefile 原文地址:Golang Gin实践 番外 请入门 Makefile 前言 含一定复杂度的软件工程,基本上都是先编译 A,再依赖 B,再编译 C ...

  4. golang(gin框架),基于RESTFUL的跨语言远程通信尝试

    golang(gin框架),基于RESTFUL的跨语言远程通信尝试 背景: 在今年的项目实训过程中,遇到了这样的问题: 企业老师讲课实用的技术栈是Java springboot. 实训实际给我们讲课以 ...

  5. 前端程序员学习 Golang gin 框架实战笔记之一开始玩 gin

    原文链接 我是一名五六年经验的前端程序员,现在准备学习一下 Golang 的后端框架 gin. 以下是我的学习实战经验,记录下来,供大家参考. https://github.com/gin-gonic ...

  6. 我的Vue之旅 10 Gin重写后端、实现页面详情页 Mysql + Golang + Gin

    第三期 · 使用 Vue 3.1 + Axios + Golang + Mysql + Gin 实现页面详情页 使用 Gin 框架重写后端 Gin Web Framework (gin-gonic.c ...

  7. 👮 Golang Gin/Ace/Iris/Echo RBAC 鉴权库

    GRBAC 项目地址: https://github.com/storyicon/grbac Grbac是一个快速,优雅和简洁的RBAC框架.它支持增强的通配符并使用Radix树匹配HTTP请求.令人 ...

  8. [Golang] Gin框架学习笔记

    0x0 Gin简介 1.Gin 是什么? Gin 是一个用 Go (Golang) 编写的 HTTP web 框架. 它是一个类似于 martini 但拥有更好性能的 API 框架, 由于 httpr ...

  9. golang gin框架 使用swagger生成api文档

    github地址:https://github.com/swaggo/gin-swagger 1.下载swag $ go get -u github.com/swaggo/swag/cmd/swag ...

随机推荐

  1. 小程序开发-媒体组件image

    image 图片组件,支持 JPG.PNG.SVG.WEBP.GIF 等格式,2.3.0 起支持云文件ID. 所有属性如下: Tips image组件默认宽度320px.高度240px image组件 ...

  2. 在logback的fileNamePattern配置%i 带来的异常

    我在logback的配置文件中企图这样配置: <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPol ...

  3. PHP复杂变量

    eval($str="${${phpinfo()}}";)     →   可以执行phpinfo() ${phpinfo()} = {${phpindo()}} PHP复杂变量 ...

  4. ascii unicode utf-8 url编码

    ascii 编码 计算机内部,所有信息最终都是一个二进制值 上个世纪60年代,美国制定了一套字符编码ascii ascii 编码就是定义:英语字符与二进制位之间的关系 unixcs unicode编码 ...

  5. Nice to meet you

    Who am i 详情可以参见我的这一篇博文 Why and how 其实之前就想在博客园开创自己的博客了,但是自己之前已经利用自己的GitHub搭建了一个 博客,然后的话自己写的文章即水又不多,说到 ...

  6. Oracle自动存储管理ASM

    参考资料: https://docs.oracle.com/cd/B19306_01/server.102/b14231/storeman.htm#ADMIN036 什么是ASM? ASM是Autom ...

  7. Django进入监听端口就自动打开指定页面,无需导航栏手动添加(Django六)

    在我们进入监听端口时画面如下:而因为在urls.py中写过如下语句 我们在监听端口后加上/login就会跳转到login.html页面,如下图 那么如何一打开监听端口就可以走动跳转到login.htm ...

  8. 国产化之路-麒麟V10操作系统安装.net core 3.1 sdk

    随着芯片国产化,操作系统国产化,软件国产化的声浪越来越高,公司也已经把开发项目国产化提上了日程,最近搞来了台长城的国产化电脑主机,用来搞试验,安装的是麒麟V10的操作系统,国产化折腾之路就此开始,用的 ...

  9. Docker网络(五)

    本章内容 1.dokcer默认自带的几种网络介绍 2. 自定义网络 3. 容器间通信 4. 容器与外界交互 docker网络分为单个主机上的容器网络和多个主机上的哇网络,本文主要讲解单个主机上的容器网 ...

  10. Java源码赏析(六)Java String 三顾

    在大致了解了String之后,可能有的读者发现了,我们并没有谈到CharSequence接口. 原因是在这一节,CharSequence要和StringBuilder(Java1.5).StringB ...