WebSocket 快速入门

已于 2024-08-16 22:15:45 修改
阅读量1.1k 收藏 29
点赞数 10
文章标签： websocket 网络协议 网络 go gin
于 2024-08-16 22:14:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66316879/article/details/141096509
版权

WebSocket是什么

WebSocket 是基于 TCP 的一种新的应用层网络协议。它实现了浏览器与服务器全双工通信，即允许服务器主动发送信息给客户端。因此，在 WebSocket 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客户端和服务器之间的数据交换变得更加简单。

WebSocket的真正美妙之处在于它们总共使用了 1 个 TCP 连接，并且所有通信都是通过这个单一的长寿命 TCP 连接完成的。这大大减少了使用 WebSockets 构建实时应用程序所需的网络开销，因为不需要对 HTTP 端点进行持续轮询。

关键词：应用层协议、基于 TCP、全双工通信、一次握手、持久连接、双向数据传输

WebSocket与http之间的区别

相同点： 

都是一样基于TCP的，都是可靠性传输协议。都是应用层协议。

联系：

 WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的。

下面一张图说明了 HTTP 与 WebSocket的主要区别：

  1. WebSocket 是双向通信协议，模拟Socket协议，可以双向发送或接受信息，而HTTP是单向的
  2. WebSocket 是需要浏览器和服务器握手进行建立连接的，而http是浏览器发起向服务器的连接。

注意：虽然HTTP/2也具备服务器推送功能，但HTTP/2 只能推送静态资源，无法推送指定信息。

WebSocket使用场景

如何建立连接

在 WebSocket 开始通信之前，通信双方需要先进行握手，WebSocket 复用了 HTTP 的握手通道，即客户端通过 HTTP 请求与 WebSocket 服务端协商升级协议。协议升级完成后，后续的数据交换则遵照 WebSocket 的协议。

利用HTTP完成握手有什么好处

  1. 让 WebSocket 和 HTTP 基础设备兼容（运行在 80 端口 或 443 端口）
  2. 可以复用 HTTP 的 Upgrade 机制，完成升级协议的协商过程。

WebSocket连接的过程

  1. 客户端发起http请求，经过3次握手后，建立起TCP连接；http请求里存放WebSocket支持的版本号等信息，如：Upgrade、Connection、WebSocket-Version等
  2. 服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据
  3. 客户端收到连接成功的消息后，开始借助于TCP传输信道进行全双工通信。

如何维持连接

如果我们使用 WebSocket 进行通信，建立连接之后怎么判断连接正常没有断开或者服务是否可用

可以通过建立心跳机制，所谓心跳机制，就是定时发送一个数据包，让对方知道自己在线且正常工作，确保通信有效。如果对方无法响应，便可以弃用旧连接，发起新的连接了。

需要重连的场景可能包括：网络问题或者机器故障导致连接断开、连接没断但不可用了或者连接对端的服务不可用了等等。

实时通信的基本步骤

  1. 引入gorilla/websocket库：首先需要安装这个库，可以通过go get命令安装：

    go get github.com/gorilla/websocket

  2. 设置WebSocket升级处理：使用gorilla/websocket的Upgrader结构来升级HTTP连接为WebSocket连接。可以设置读取和写入缓冲区大小，以及检查请求来源的函数。

  3. 创建WebSocket处理函数：编写一个处理函数，该函数使用Upgrader来升级连接，并处理WebSocket消息的接收和发送。

  4. 注册WebSocket路由：在Gin的路由中注册一个路径，当客户端请求这个路径时，调用上面创建的WebSocket处理函数。

  5. 编写业务逻辑：在WebSocket处理函数中，编写业务逻辑，例如接收消息、发送消息、连接管理等。

  6. 测试WebSocket服务：启动服务后，可以使用WebSocket客户端工具（如浏览器的开发者工具或专用的WebSocket测试工具）来测试WebSocket服务是否能够正常通信。

package main

import (
	"github.com/gin-gonic/gin"
	"github.com/gorilla/websocket"
	"net/http"
)

// 定义Upgrader用于升级HTTP连接为WebSocket连接
var upgrader = websocket.Upgrader{
	ReadBufferSize:  1024,
	WriteBufferSize: 1024,
	CheckOrigin: func(r *http.Request) bool {
		// 允许所有CORS请求
		return true
	},
}

func main() {
	r := gin.Default()

	// 定义WebSocket路由
	r.GET("/ws", func(c *gin.Context) {
		serveWebSocket(c.Writer, c.Request)
	})

	// 启动Gin服务器
	r.Run(":8080")
}

// serveWebSocket处理WebSocket连接
func serveWebSocket(w http.ResponseWriter, r *http.Request) {
	conn, err := upgrader.Upgrade(w, r, nil)
	if err != nil {
		return // 错误处理
	}
	defer conn.Close()

	// 处理WebSocket消息
	for {
		_, message, err := conn.ReadMessage()
		if err != nil {
			return // 错误处理
		}
		// 将接收到的消息发送回客户端
		if err := conn.WriteMessage(websocket.TextMessage, message); err != nil {
			return // 错误处理
		}
	}
}

在这个示例中，我们创建了一个WebSocket服务端，它监听/ws路径的WebSocket请求。当客户端连接时，服务器将使用serveWebSocket函数来处理连接。服务器接收消息并直接将相同消息发送回客户端，这是一个基本的WebSocket回声服务器的实现。

hello world 示例

package main

import (
	"github.com/gin-gonic/gin"
	"github.com/gorilla/websocket"
	"log"
	"net/http"
	"time"
)

var upgrader = websocket.Upgrader{
  // 这个是校验请求来源
  // 在这里我们不做校验，直接return true
	CheckOrigin: func(r *http.Request) bool {
		return true
	},
}

func main() {
	engine := gin.Default()

	engine.GET("/helloWebSocket", func(context *gin.Context) {
    // 将普通的http GET请求升级为websocket请求
		client, _ := upgrader.Upgrade(context.Writer, context.Request, nil)
		for {
			// 每隔两秒给前端推送一句消息“hello, WebSocket”
			err := client.WriteMessage(websocket.TextMessage, []byte("hello, WebSocket"))
			if err != nil {
				log.Println(err)
			}
			time.Sleep(time.Second * 2)
		}
	})

	err := engine.Run(":8090")
	if err != nil {
		log.Fatalln(err)
	}
}

可以用websocket在线测试工具代码：http://coolaf.com/tool/chattest。

注意：请求url前面的http://记得换成ws://

实现实时消息推送 示例

package module

import (
	"github.com/gin-gonic/gin"
	"github.com/gorilla/websocket"
	"log"
	"net/http"
	"sync"
	"time"
)

var (
  // 消息通道
	news = make(map[string]chan interface{})
  // websocket客户端链接池
	client = make(map[string]*websocket.Conn)
  // 互斥锁，防止程序对统一资源同时进行读写
	mux sync.Mutex
)

// api:/getPushNews接口处理函数
func GetPushNews(context *gin.Context)  {
	id := context.Query("userId")
	log.Println(id + "websocket链接")
  // 升级为websocket长链接
	WsHandler(context.Writer, context.Request, id)
}

// api:/deleteClient接口处理函数
func DeleteClient(context *gin.Context)  {
	id := context.Param("id")
  // 关闭websocket链接
	conn, exist := getClient(id)
	if exist {
		conn.Close()
		deleteClient(id)
	} else {
		context.JSON(http.StatusOK, gin.H{
			"mesg": "未找到该客户端",
		})
	}
  // 关闭其消息通道
	_, exist =getNewsChannel(id)
	if exist {
		deleteNewsChannel(id)
	}
}

// websocket Upgrader
var wsupgrader = websocket.Upgrader{
	ReadBufferSize:   1024,
	WriteBufferSize:  1024,
	HandshakeTimeout: 5 * time.Second,
	// 取消ws跨域校验
	CheckOrigin: func(r *http.Request) bool {
		return true
	},
}

// WsHandler 处理ws请求
func WsHandler(w http.ResponseWriter, r *http.Request, id string)  {
	var conn *websocket.Conn
	var err error
	var exist bool
  // 创建一个定时器用于服务端心跳
	pingTicker := time.NewTicker(time.Second * 10)
	conn, err = wsupgrader.Upgrade(w, r, nil)
	if err != nil {
		log.Println(err)
		return
	}
	// 把与客户端的链接添加到客户端链接池中
	addClient(id, conn)

	// 获取该客户端的消息通道
	m, exist := getNewsChannel(id)
	if !exist {
		m = make(chan interface{})
		addNewsChannel(id, m)
	}

	// 设置客户端关闭ws链接回调函数
	conn.SetCloseHandler(func(code int, text string) error {
		deleteClient(id)
		log.Println(code)
		return nil
	})

	for {
		select {
		case content, _ := <- m:
      // 从消息通道接收消息，然后推送给前端
			err = conn.WriteJSON(content)
			if err != nil {
				log.Println(err)
				conn.Close()
				deleteClient(id)
				return
			}
		case <- pingTicker.C:
      // 服务端心跳:每20秒ping一次客户端，查看其是否在线
			conn.SetWriteDeadline(time.Now().Add(time.Second * 20))
			err = conn.WriteMessage(websocket.PingMessage, []byte{})
			if err != nil {
				log.Println("send ping err:", err)
				conn.Close()
				deleteClient(id)
				return
			}
		}
	}
}

// 将客户端添加到客户端链接池
func addClient(id string, conn *websocket.Conn) {
	mux.Lock()
	client[id] = conn
	mux.Unlock()
}

// 获取指定客户端链接
func getClient(id string) (conn *websocket.Conn, exist bool) {
	mux.Lock()
	conn, exist = client[id]
	mux.Unlock()
	return
}

// 删除客户端链接
func deleteClient(id string) {
	mux.Lock()
	delete(client, id)
	log.Println(id + "websocket退出")
	mux.Unlock()
}

// 添加用户消息通道
func addNewsChannel(id string, m chan interface{}) {
	mux.Lock()
	news[id] = m
	mux.Unlock()
}

// 获取指定用户消息通道
func getNewsChannel(id string) (m chan interface{}, exist bool) {
	mux.Lock()
	m, exist = news[id]
	mux.Unlock()
	return
}

// 删除指定消息通道
func deleteNewsChannel(id string) {
	mux.Lock()
	if m, ok := news[id]; ok {
		close(m)
		delete(news, id)
	}
	mux.Unlock()
}

补充说明

当你要给某个用户推送消息时，你只需要使用getNewsChannel()方法获取该用户的消息通道，然后把消息送入通道就可以了。

若用户离线，你可以把消息直接存到用户所有消息中，或者设置一个消息队列，把消息放到用户未读消息队列中，下次用户上线时再一次性推送给用户。

服务端心跳：服务端每隔20秒回ping一下用户，查看其是否还在线，若ping不到，则服务端自动关闭websocket链接。

花开了￥
关注
WebSocket 快速入门 - springboo聊天功能
m0_56308072的博客
04-21 1193
HTTP和WebSocket都是啥？
WebSocket 的入门Demo
11-02
WebSocket 的入门Demo!
WebSocket快速入门
最新发布
x2624252655的博客
08-31 71
WebSocket一种双向通信协议，在建立连接后，WebSocket服务器和客户端都能主动的向对方发送或接收数据，就像Socket一样，不同的是WebSocket是一种建立在Web基础上的一种简单模拟Socket的协议；WebSocket在建立握手连接时，数据是通过http协议传输的，“GET/chat HTTP/1.1”，这里面用到的只是http协议一些简单的字段。这是一种比较官方的说法，简单点来说就是，在一次TCP连接中，通信的双方可以相互通信。都建立在TCP之上，通过TCP协议来传输数据。
Node——创建websocket及客户端连接
qq812457115的博客
05-11 2444
【方法一：net】 cnpm i -S net const net = require('net'); const server = net.Server() server.on("listening", () => { console.log("listening") }) server.on("connection", (socket) => { socket.on("data", buf => { console.log(buf) }) socket.
WebSocket
自洽而内求
04-07 1237
WebSocket是一种在客户端和服务器之间实现双向通信的网络协议。它通过在单个TCP连接上提供全双工通信功能，使得服务器可以主动向客户端推送数据，而不需要客户端发起请求
websocket的使用及建立连接
小蜜蜂vs码农
05-23 3564
websocket的使用及建立连接
WebSocket快速入门及基本使用
Wonder
08-31 2743
假设我们创建了一个 ws 对象：参数说明：url：指定连接的 URL；protocol：可选，指定可接受的子协议。ws 对象上的事件：事件说明open连接建立时触发message客户端接收到服务端消息时触发error通信出现错误时触发close连接关闭时触发另外，我们可以通过ws.send()方法，给服务端发送数据；也可以通过ws.close()方法主动断开连接。WebSocket建立的是长连接，且允许服务端主动向客户端推送数据，使得客户端和服务器之间的数据交换变得更加简单。...
websocket入门demo
06-19
这个项目包含了WebSocket服务端和客户端的代码示例，可以帮助初学者快速理解WebSocket的工作原理和应用。 1. **WebSocket协议概述**：WebSocket是HTML5的一部分，通过TCP连接提供双向通信。它在握手阶段使用HTTP...
websocket-starter:Websocket入门项目
04-30
websocket入门 WebSocket入门项目。 快速预览 该项目包含一个简单的应用程序，该应用程序： 在/ws接受websocket连接 发回客户发送的任何消息 向/ws所有连接的客户端广播消息 ： public class App extends Jooby {...
websocket快速
07-27
- *3* [WebSocket快速入门](https://blog.csdn.net/Dbh321/article/details/118559955)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_...
websocket快速入门
Ronychen的博客
07-03 737
一、概念（什么是websocket） WebSocket是一种通信协议，可在单个TCP连接上进行全双工通信。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以建立持久性的连接，并进行双向数据传输。 二、特点 最大的特点就是服务器可以主动地向客户端发送信息，客户端也还是可以主动向服务端发信息，是真正的平等对话，它属于服务器的一种推送技术 建立在 TCP 协议之上，服务器端的实现比较容
WebSocket：从建立连接到关闭的完整流程
曲江涛的博客
06-01 9979
WebSocket（WS）是一种在客户端和服务器之间建立持久连接的通信协议。下面我将详细介绍WebSocket的开始链接到结束并彻底关闭的流程设计。客户端发起连接请求：客户端通过创建WebSocket对象并向服务器发送连接请求。请求中包含了连接的URL和其他必要的头部信息。服务器接受连接请求：服务器收到连接请求后，进行验证和处理。如果请求符合要求，服务器将返回一个握手响应。客户端与服务器进行握手：客户端收到服务器的握手响应后，进行验证。如果握手成功，建立了WebSocket连接。
搭建WebSocket服务器与客户端
热门推荐
时光的博客
02-17 3万+
市场上有几款比较好的开源库供使用，比如PyWebSocket,WebSocket-Node, LibWebSockets等，这些库文件已经实现了WebSocket数据包的封装和解析，我们可以调用这些接口减少工作量。 1.     PyWebSocket PyWebSocket采用Python语言编写，可以很好的跨平台，扩展起来也比较简单，目前WebKit采用它搭建WebSocket服务器来
Socket Websocket 客户端和服务端实现
梁小憨憨的博客
12-16 1422
最近在写一个上位机，用到了Websocket，这里就整理一下，顺便把Socket的东西也整理的了，方便以后查阅。
从零开始学习WebSocket：5分钟快速入门
k2417254739kj的博客
06-05 252
了解WebSocket是一种在Web浏览器和服务器之间实现双向通信的协议，它允许客户端和服务器之间建立持久连接，双方可以通过该连接发送和接收数据。相比传统的HTTP协议，WebSocket具有更低的延迟和更高的效率，适用于需要实时性和互动性的应用程序，比如在线游戏、聊天应用、实时地图等。
websocket快速开始
西京刀客
04-04 560
jetty websocket快速开始 jetty websocket认识 Jetty和Tomcat一样，也是一个Servlet的容器。如果说不同之处，那么最大的不同应该是Tomcat采用的是BIO处理方式，也就是说一个request会用一个线程去处理，即使是WebSocket这种长连接，也是会独立开一个线程。作为一个普通的Web服务器，tomcat可以轻松应对耗时比较短的Request/Resp...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值