WebSocket前后端建立以及使用

news2024/11/18 14:01:39

1、什么是WebSocket

WebSocket 是一种在 Web 应用程序中实现双向通信的协议。它提供了一种持久化的连接允许服务器主动向客户端推送数据,同时也允许客户端向服务器发送数据,实现了实时的双向通信。 这部分直接说你可能听不懂;我举个例子说他的功能(

  • 比如我们在网站上通过点击用户,然后出现用户的主页这是http请求,通过我们主动点击然后出现页面
  • 然后在网站上有人给我发送了私信消息的时候,我们没有点击任何东西,页面却会跳出提示(xxx发送了一条私信)这是websocket

下面先说一下为什么会出现WebSocket?

2、WebSocket的由来?

平时我们用java或者go等语言去写一些接口,然后前端调用这些接口就能实现数据获取展示等功能,也就是写出来了一个web页面比如:xx书城。但经过观察就发现这种普通的http接口都是要:当前端点击某个位置的时候,主动的发送http请求去后端接口,才能够拿到数据。也可以理解为http如果想知道服务器是否有内容更新就必须一直发请求到服务端去确认,如果服务器没有更新,那这些通信就都是徒劳的。

所以想要实现http协议能够及时探知服务器上是否有内容更新,以下这些http标准就会成为瓶颈

  • 一条连接上只可发送一个请求。
  • 请求只能从客户端开始。客户端不可以接收除响应以外的指令。
  • 请求 / 响应首部未经压缩就发送。首部信息越多延迟越大。
  • 发送冗长的首部。每次互相发送相同的首部造成的浪费较多。
  • 可任意选择数据压缩格式。非强制压缩发送。

后来提出了一种Commet的解决方法,即当客户端发送服务端是否有内容更新的查看请求的时候,服务端就先不回应,当服务器端内有内容更新时,再返回该响应。这是一种通过延迟应答,实现服务器端向客户端推送的功能。但是一次连接持续时间边长会消耗更多的资源,同时 http 的瓶颈也没解决。

后来又提出了SPDY的设计,能实现功能但有一些缺点过于明显

最后后来Websocket就出现了。因为不论用什么技术,只要通信使用的是HTTP协议,那就无法彻底解决瓶颈问题。WebSocket网络技术正实为解决这些问题而实现的一套新协议及API。

WebSocket协议

一旦建立了WebSocket协议的通信连接,之后所有的通信都依靠这个专用协议进行,通信过程可以发json、xml、图片等任意格式的数据。

由于是建立在HTTP基础之上的协议,因此连接的发起方仍是客户端,而一旦确立 WebSocket 通信连接,不论服务器还是客户端,任意一方都可直接向对方发送报文

websocket有推送功能且是长久连接,它的首部信息也小,连接开销以及通信量都减小了很多。

WebSocket连接

接下来就简单实现以下 前端用js,后端用go 语言怎么实现建立websocket连接的,前端和后端使用相同的 URL 来建立 WebSocket 连接是最常见的方式

后端部分

因为想建立连接要先开启服务端做好准备监听,然后等待客户端去发起请求

package main

import (
	"fmt"
	"log"
	"net/http"

	"github.com/gorilla/websocket"
)

// 创建一个 websocket.Upgrader 对象
var upgrader = websocket.Upgrader{
	CheckOrigin: func(r *http.Request) bool {
		// CheckOrigin 函数用于检查请求的来源是否合法,即允许跨域访问
		return true
	},
}

func websocketHandler(w http.ResponseWriter, r *http.Request) {
	// 将 HTTP 连接升级为 WebSocket 连接   //request 参数包含了客户端发起连接时提供的 URL 信息ws://localhost:8088/userid
	conn, err := upgrader.Upgrade(w, r, nil)
	if err != nil {
		log.Println("升级为 WebSocket 连接失败:", err)
		return
	}

	// 读取客户端发送的消息
	for {
		//阻塞式的操作。当调用这个方法时,如果没有接收到新的消息,它将一直阻塞等待,直到收到新的消息或发生错误。
		messageType, p, err := conn.ReadMessage()
		if err != nil {
			log.Println("读取消息失败:", err)
			break
		}

		// 在控制台打印接收到的消息
		log.Printf("接收到消息: %s", p)

		// 构建回复消息
		response := []byte(fmt.Sprintf("接收到消息: %s", p))

		// 通过websocket推送,去回复客户端消息,客户端会及时接收到这份信息
		err = conn.WriteMessage(messageType, response)
		if err != nil {
			log.Println("发送消息失败:", err)
			break
		}
	}

	// 关闭 WebSocket 连接
	err = conn.Close()
	if err != nil {
		log.Println("关闭连接失败:", err)
	}
}

func main() {
	http.HandleFunc("/ws", websocketHandler)
	log.Println("WebSocket 服务器运行在 http://localhost:8000/ws")
	err := http.ListenAndServe(":8088", nil)
	if err != nil {
		log.Fatal("启动服务器失败:", err)
	}
}

前端通过websocket发送给后端的信息就会打印到控制台了

前端部分

前端页面就这样,打开的时候就会自动运行js部分,然后发起连接请求了


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <button onclick="onclicked()">发送</button >
    <script>
    	//与本地计算机通信,注意建立的是websocket连接,所以连接的url开头就是ws了
        const ws = new WebSocket('ws://localhost:8088/ws')
        //与其他计算机通信
        //const ws = new WebSocket('ws://服务器地址:端口号')
        function onclicked (){
          ws.send(999);
        }
        ws.onopen = function () {
	        console.log('我们连接成功啦...')
	        ws.send(11);
        }
        ws.onerror = function () {
        	console.log('连接失败了...')
        }
        ws.onmessage = function (e) {
	        console.log('服务端传来数据啦...' + e.data)
        }
        ws.onclose = function () {
        	console.log('连接关闭了...')
        }

    </script>
</body>
</html>

同样,服务端通过websocket推送到前端的控制台中展示

这就是一个简单的websocket应用,下次我会用websocket推送功能去实现一个简单的聊天系统,关注看后续。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1664911.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

线路和绕组中的波过程(三)

本篇为本科课程《高电压工程基础》的笔记。 本篇为这一单元的第三篇笔记。上一篇传送门。 冲击电晕对线路上波过程的影响 实际中的导线存在电阻&#xff0c;而且还有对地电导&#xff0c;会消耗一部分能量。但是因为雷击所涉及的传输距离很短&#xff0c;所以几乎可以忽略这…

acer笔记本怎样进行系统还原?教你两招!

acer笔记本怎样进行系统还原&#xff1f;教你两招&#xff01; 作为笔记本用户&#xff0c;你在日常使用中可能会遇到各种各样的电脑问题。一般来说&#xff0c;对于一些小问题&#xff0c;我们可以通过一些简单的操作来解决&#xff0c;比如重新启动电脑或者长按电源键强制关机…

【吴恩达机器学习-week2】多个变量的线性回归问题

文章目录 1.1 目标2 问题陈述2.1 包含我们示例的矩阵 X2.2 参数向量 w \mathbf{w} w 和 b b b 3 使用多个变量进行模型预测3.1 逐元素单独预测3.2 单一预测&#xff0c;向量 4 使用多个变量计算成本5 使用多个变量的梯度下降5.1 使用多个变量计算梯度 多个变量的梯度下降小结…

卷积特征图与感受野

特征图尺寸和感受野是卷积神经网络中非常重要的两个概念&#xff0c;今天来看一下&#xff0c;如何计算特征尺寸和感受野。 特征图尺寸 卷积特征图&#xff0c;是图片经过卷积核处理之后的尺寸。计算输出特征的尺寸&#xff0c;需要给出卷积核的相关参数包括&#xff1a; 输…

虚表,虚函数习题

6. 关于虚表说法正确的是&#xff08;d &#xff09; A&#xff1a;一个类只能有一张虚表 多重继承 B&#xff1a;基类中有虚函数&#xff0c;如果子类中没有重写基类的虚函数&#xff0c;此时子类与基类共用同一张虚表 即使子类重写了基类的虚函数&#xff0c;此时子类与…

模拟集成电路(3)----单级放大器(共源极)

模拟集成电路(3)----单级放大器&#xff08;共源极&#xff09; 放大是模拟电路的基本功能 大多数自然模拟信号太小而无法处理需要足够的信噪比 理想的放大器 线性&#xff1a;无限的幅度和频率范围 输入阻抗无限大 输出阻抗无限小 共源放大器 共源放大器就是将源极接A…

视频监控系统中,中心录像服务器的录像文件实际大小和理论值相差很大的问题解决

目录 一、现象描述 二、视频监控的录像文件计算 &#xff08;一&#xff09;计算方法 1、仅视频部分 2、视频和音频部分 3、使用平均码率 &#xff08;二&#xff09;计算工具 1、关注威迪斯特公众号 2、打开“计算容量”的小工具 三、原因分析 &#xff08;一&…

企业网络需求及适合的解决方案

近年来&#xff0c;企业网络通信需求可谓五花八门&#xff0c;变幻莫测。它不仅为企业的生产、办公、研发、销售提供全面赋能&#xff0c;同时也让企业业务规模变大成为了可能。 在当前的技术格局下&#xff0c;中大型企业常见的技术方案有很多&#xff0c;而同时也有各自不可替…

超级好看的html网站维护源码

源码介绍 好看的html网站维护源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面&#xff0c; 源码截图 源码下载 好看的html网站维护源码

【力扣】LCR 166.珠宝的最高价值

原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 目录 1.题目描述 2.思路分析 3.代码实现 1.题目描述 现有一个记作二维矩阵 frame 的珠宝架&#xff0c;其中 frame[i][j] 为该位置珠宝的价值。拿取珠宝的规则为&#xff1a; 只能从架子的左上角开始拿珠宝…

《Python编程从入门到实践》day25

# 昨日知识点回顾 如何创建多行外星人 碰撞结束游戏 创建game_stats.py跟踪统计信息 # 今日知识点学习 第14章 记分 14.1 添加Play按钮 14.1.1 创建Button类 import pygame.font# button.py class Button:def __init__(self, ai_game, msg):"""初始化按钮…

按键配合LDO实现开关功能

今天给大家分享一个学到的按键开关电路&#xff0c;适合没有足够空间给自锁开关的场景&#xff0c;既可以用于USB供电控制也可以用于电池供电控制。话不多说上电路图先。 核心任务就是通过按键控制LDO芯片的使能管脚的电平状态&#xff0c;这枚NCP芯片高电平使能&#xff0c;VB…

基于Nios软件实现流水灯+串口输出

基于NIOS-II软核实现流水灯串口输出 引言&#xff1a; ​ 在现代电子设计领域&#xff0c;FPGA&#xff08;现场可编程门阵列&#xff09;因其灵活性和并行处理能力而成为实现复杂数字系统的首选平台。Nios II&#xff0c;作为Altera&#xff08;现为Intel旗下&#xff09;提供…

2016-2021年全国范围的2.5m分辨率的建筑屋顶数据

一、论文介绍 摘要&#xff1a;大规模且多年的建筑屋顶面积&#xff08;BRA&#xff09;地图对于解决政策决策和可持续发展至关重要。此外&#xff0c;作为人类活动的细粒度指标&#xff0c;BRA可以为城市规划和能源模型提供帮助&#xff0c;为人类福祉带来好处。然而&#xf…

WordPress原创插件:超链接点击访问统计

WordPress原创插件&#xff1a;超链接点击访问统计 https://download.csdn.net/download/huayula/89296775

ICode国际青少年编程竞赛- Python-4级训练场-while语句综合

ICode国际青少年编程竞赛- Python-4级训练场-while语句综合 1、 for i in range(4):while not Flyer[i].disappear():wait()Spaceship.step(6)Spaceship.turnLeft()2、 Dev.turnLeft() for i in range(4):Spaceship.step(2)while Flyer[i].disappear():wait()Dev.step(4)Dev.…

Go实现树莓派读取at24c02 eeprom读写数据

步骤 启用i2c 参考 Go实现树莓派读取bh1750光照强度 代码 package mainimport ("fmt""periph.io/x/conn/v3/i2c" )type AT24C02Device struct {dev *i2c.Dev }func NewAT24C02Device(addr uint16, bus i2c.BusCloser) (*AT24C02Device, error) {var (d…

【HDFS】关于HDFS-17497:在commit block时更新quota

链接:https://github.com/apache/hadoop/pull/6765 Ticket标题:The number of bytes of the last committed block should be calculated into the file length。 HDFS里,一个在写入的文件可能包含多个commited状态的块。 但是计算文件大小的时候,最后一个commited block并…

Yii2 自动生成php代码

文档地址&#xff1a;入门&#xff08;Getting Started&#xff09;: 用 Gii 生成代码&#xff08;Generating Code with Gii&#xff09; - Yii 2.0 权威指南 - 文档 - Yii Framework 中文网 找到配置文件&#xff0c;以我的项目为例&#xff1a; 因为的是开启了路由美化所以访…

大数据面试题第一期*4

题1、HDFS存储机制 &#xff08;1&#xff09;客户端向namenode请求上传文件 &#xff0c;namenode检查目标文件是否已存在 &#xff0c;父目录是否存在。 &#xff08;2&#xff09;namenode返回是否可以上传。 &#xff08;3&#xff09;客户端请求第一个 block上传到哪几个d…