在js中使用grpc(包括代理）后端使用Go

news2024/9/30 13:30:23

叙述

最近在研究web端的聊天系统，准备使用grpc作为通讯协议，因为客户端要主动的接受到消息，所以想要使用双向流的grpc。
但是经过几天的研究发现，grpc在浏览器上是不支持的，因为浏览器使用的协议是http1.1，而grpc底层使用的是http2协议，所以不兼容。
但是由于前端会有使用到grpc的需求，所以grpc官方也给出了一套解决方案，grpc-web
实际上grpc-web在浏览器中使用的还是http协议，但是会使用到代理，将http请求转换成grpc请求，‘欺骗’ 服务器，关于代理方面，我下文中会解释
而且grpc-web还有一个重要的缺点不支持双向流和客户端流，这显然与我最初的本意违背，但是毕竟研究了那么久，还是写篇博客纪念一下

前端

我是将前端作为客户端使用的，所以这边这只会写客户端的代码，想要服务端的要使用node才行，纯浏览器就不要考虑服务端了

下载

1.下载protoc
下载 v3.20.1版本，不要下载最新版本 因为最新版本有缺陷，跟grpc-web搭配不了
我下载的是protoc-3.20.1-win64.zip包

下载地址： https://github.com/protocolbuffers/protobuf/releases

解压这个文件之后，将bin目录下的 protoc.exe文件复制到 Go目录下的bin文件夹下面，如果不知道Go目录在哪里的话，可以打开环境变量的path，可以看到

2.下载protoc-gen-grpc-web

下载地址 ：https://github.com/grpc/grpc-web/releases/download/1.4.2/protoc-gen-grpc-web-1.4.2-windows-x86_64.exe

下载完成之后，将这个应用程序同样放到Go的bin目录下，并将其名字改成protoc-gen-grpc-web.exe

这两部都好了之后，go的bin目录下长这个样子：
在这里插入图片描述

编辑

然后就可以开始写代码啦
将官网的grpc-web的代码拉下来，其实只
拉取完成后，使用cscode或其他软件打开
你存放项目的目录\grpc-web\net\grpc\gateway\examples\helloworld 这个文件夹
没错，下载这么大的项目，只需要用这么一小个目录

在终端输入

npm install

将他的所需要依赖下载下来

在项目（helloworld）根目录下创建文件夹hello，用于存放等下由命令生成的pb 和grpc_pb文件

在终端运行命令（如果你移动了proto文件的位置，那么要切换到在proto所在文件夹下运行命令）

protoc  helloworld.proto --js_out=import_style=commonjs:../hello --grpc-web_out=import_style=commonjs,mode=grpcwebtext:../hello

然后就可以看到
在这里插入图片描述

编辑client.js文件

改变后的client.js文件

const { HelloRequest, RepeatHelloRequest, HelloReply } = require('./hello/helloworld_pb.js');
const { GreeterClient } = require('./hello/helloworld_grpc_web_pb.js');

var client = new GreeterClient('http://localhost:9090', null, null);

var but = document.getElementById('bu')

//这里设置了一个点击事件，当点击按钮的时候，再向服务端发送请求
//按钮要联系到index.html文件上
but.onclick  = function () {
  var request = new HelloRequest();
  request.setName('World');
  client.sayHello(request, {}, (err, response) => {
    if (err) {
      console.log(`Unexpected error for sayHello: code = ${err.code}` +
        `, message = "${err.message}"`);
    } else {
      console.log(response.getMessage());
    }
  });
}


// server streaming call
// var streamRequest = new RepeatHelloRequest();
// streamRequest.setName('World');
// streamRequest.setCount(5);

// var stream = client.sayRepeatHello(streamRequest, {});
// stream.on('data', (response) => {
//   console.log(response.getMessage());
// });
// stream.on('error', (err) => {
//   console.log(`Unexpected stream error: code = ${err.code}` +
//               `, message = "${err.message}"`);
// });

将clien.js文件打包成main.js

执行命令

npx webpack client.js

如果中途有需要确认的命令 直接yes或者y就好

然后就会生成一下文件
在这里插入图片描述

将main.js引入index.html，并编辑index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>gRPC-Web Example</title>
</head>

<body>
  <p>Open up the developer console and see the logs for the output.</p>
  <button id="bu" >发送消息</button>
  <script src="./dist/main.js"></script>
</body>

</html>

Go后端

设置proto文件

将前端的helloworld.proto文件复制到后端go项目中，创建hello目录

syntax = "proto3";

package helloworld;
option go_package = "../hello";//这里相较于前端增加一行，这里是pb和grpc_pb文件生成的目录

service Greeter {
  // unary call
  rpc SayHello(HelloRequest) returns (HelloReply);
  // server streaming call
  rpc SayRepeatHello(RepeatHelloRequest) returns (stream HelloReply);
}

message HelloRequest {
  string name = 1;
}

message RepeatHelloRequest {
  string name = 1;
  int32 count = 2;
}

message HelloReply {
  string message = 1;
}

在这里插入图片描述

生成pb和grpc_pb文件

在终端中进入proto文件所在的目录

cd pbfiles

然后运行 命令

protoc -I . --go_out=. helloworld.proto --go-grpc_out=. helloworld.proto

生成一下两个文件
在这里插入图片描述

创建服务端

helloWorldServer.go

package main

import (
	"context"
	"fmt"
	"google.golang.org/grpc"
	protos "grpc_server/hello"
	"net"
)

type helloServer struct {
	protos.UnimplementedGreeterServer
}

func (s *helloServer) SayHello(ctx context.Context, req *protos.HelloRequest) (*protos.HelloReply, error) {
	//获取到的客户端传来的值
	fmt.Println("服务端被调用了")
	name := req.GetName()
	fmt.Printf("Data from client : %s\n", name)
	//将值传回到客户端
	return &protos.HelloReply{
		Message: "我是服务端",
	}, nil
}

func main() {
	//创建rpc 服务器
	server := grpc.NewServer()
	protos.RegisterGreeterServer(server, &helloServer{})
	//创建 Listen，监听 TCP 端口
	listen, err := net.Listen("tcp", ":8080")
	if err != nil {
		panic(err)
	}
	defer listen.Close()
	//开启服务
	err = server.Serve(listen)
	if err != nil {
		panic(err)
	}
}

配置代理

代理我这边使用的是grpcwebproxy，官方的那个用的envoy.yaml，是用在后端的，不会用，换了个简单的

下载

https://github.com/improbable-eng/grpc-web/releases/tag/v0.13.0

在这里插入图片描述
然后将这个exe文件放到helloworld项目的根目录里面
在这里插入图片描述

运行exe文件

在exe文件所在目录下执行命令

grpcwebproxy-v0.15.0-win64.exe --allow_all_origins --backend_addr=localhost:8080 --run_tls_server=false --server_http_debug_port=9090 --allow_all_origins=true

如果你和我的grpcwebproxy版本不同，记得换成你的grpcwebproxy的名字，不然报错

至于这个命令的详解，可以去看这篇博客grpcwebproxy代理服务2步启动

运行

先开启服务端
在这里插入图片描述

后开启客户端

在index.html文件中 按F5或Fn+F5，就可以开启，并点击按钮向服务端发送消息

运行结果

在这里插入图片描述

在这里插入图片描述

完结，撒花

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

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

相关文章

Apipost自动化测试功能详解

Apipost自动化测试功能详解

如何快速掌握接口自动化测试&#xff1f;首先我们看看&#xff1a; 1、什么是接口自动化测试&#xff1f; 通常&#xff0c;在设计了测试用例并通过评审之后&#xff0c;由测试人员根据测试用例中描述的规程一步步执行测试&#xff0c;得到实际结果与期望结果的比较。自动化测…
阅读更多...
新浪股票行情数据接口有什么作用？

新浪股票行情数据接口有什么作用？

通过新浪股票行情数据接口可以让投资者在实际交易当中能够更加精准的洞悉盘口变化。该接口可以说是目前最好用的免费股票行情数据接口了&#xff0c;虽然一直并未公开&#xff0c;但暂时使用良好。大家用浏览器访问新浪的股票行情数据接口就能查看最新行情数据了。那么今天小编…
阅读更多...
New Features Of JDK - JDK9 Modular System

New Features Of JDK - JDK9 Modular System

Modular System 是 JAVA9 中提供的新特性&#xff0c;它从一个独立的开源项目而来&#xff0c;名为 Jigsaw Project。在此之前&#xff0c;我们对于 Java 技术栈中模块化的认知是基于 OSGI 的&#xff0c;实际上 OSGI 也确实形成了它自己独有的体系&#xff0c;并且是一定程度上…
阅读更多...
TFT espi相关

TFT espi相关

文章目录1 .库文件设置1-1&#xff1a;这是库文件 tft _espi1-2&#xff1a;如何确定像素排列方式1-3&#xff1a;颜色显示异常处理方法2 .显示图片3.显示图片方法1 .库文件设置 1-1&#xff1a;这是库文件 tft _espi 链接&#xff1a;https://pan.baidu.com/s/1sT6s6VtpuwNV…
阅读更多...
Spring【五大类注解的存储和读取Bean方法注解】

Spring【五大类注解的存储和读取Bean方法注解】

Spring【5大类注解的存储和读取Bean对象】&#x1f34e;一. 五大类存储 Bean 对象&#x1f352;1.1 配置spring-config.xml扫描路径&#x1f352;1.2 添加五大类注解存储 Bean 对象&#x1f349;1.2.1 Controller&#xff08;控制器存储&#xff09;&#x1f349;1.2.2 Service…
阅读更多...
ADAU1860调试心得（14）单片机启动与控制ADAU1860详解

ADAU1860调试心得（14）单片机启动与控制ADAU1860详解

ADAU1860实现脱机运行&#xff0c;是开发这个DSP的最后一步。这颗芯片有一颗HIFI 3Z的蓝牙MCU内嵌&#xff0c;用户可以用这颗MCU来进行脱机&#xff0c;甚至直接用C来开发1860&#xff08;有专门的SDK&#xff0c;不在此做更多阐述&#xff09;&#xff0c;但是这个HIFI 3Z的软…
阅读更多...
零代码使用air32做USB转串口

零代码使用air32做USB转串口

零代码实现USB转串口 环境搭建参考Air32F103使用手册 创建工程 新建工程 选择设备为AIR32F103CB 在弹出的RTE窗口勾选如下组件 配置工程 修改编译器为AC5&#xff0c;并启用MicroLIB 启用C99标准支持 添加代码 添加功能代码&#xff0c;在Source Group文件夹右键&#xff…
阅读更多...
观测云产品更新｜应用性能新增服务清单功能；用户访问监测 Session 查看器调整；事件新增移动端跳转选项等

观测云产品更新｜应用性能新增服务清单功能；用户访问监测 Session 查看器调整；事件新增移动端跳转选项等

观测云更新 应用性能新增服务清单功能 应用性能监测服务清单&#xff0c;支持实时查看不同服务的所有权、依赖关系、性能、关联的仪表版以及关联分析&#xff0c;快速发现和解决服务的性能问题&#xff0c;帮助团队高效地构建及管理大规模的端到端的分布式应用。 更多详情可…
阅读更多...
FineReport可视化数据图表- 函数计算组成和语法示例

FineReport可视化数据图表- 函数计算组成和语法示例

1.1设计报表 例如&#xff0c;使用内置数据集「销量」创建数据集ds1&#xff0c;对不同地区销量高低做判断。 将「地区」字段拖入 A2&#xff0c;将「销量」字段拖入B2&#xff0c;并设置「销量」展示方式为求和&#xff0c;然后对不同地区的销量情况进行求和&#xff0c;如下…
阅读更多...
【吴恩达机器学习笔记】九、机器学习系统的设计

【吴恩达机器学习笔记】九、机器学习系统的设计

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?spm1011.2415.3001.5343 &#x1f4e3;专栏定位&#xff1a;为学习吴恩达机器学习视频的同学提供的随堂笔记。 &#x1f4da;专栏简介&#xff1a;在这个专栏&#xff0c;我将整理吴恩达机器学习视频的所有内容的笔记&…
阅读更多...
Allegro如何用list文件抓取器件操作指导

Allegro如何用list文件抓取器件操作指导

Allegro如何用list文件抓取器件操作指导 Allegro支持list文件在PCB上抓取器件，具体操作如下 在pcb相同目录下新建一个后缀为.lst文件,任意命名一个名字比如123.lst 原理图中批量选择需要抓取器件的信息，支持批量选择，无用的信息框选进去也是可以的 复制到新建lst文件中去…
阅读更多...
主流嵌入式操作系统有哪些

主流嵌入式操作系统有哪些

嵌入式操作系统EOS(Embedded OperatingSystem)是一种用途广泛的系统软件&#xff0c;过去它主要应用于工业控制和国防系统领域。常见的嵌入式操作系统有wince、PALM OS、linux、Android、FreeRTOS。 WINDOWS CE是微软开发的一个开放的、可升级的32位嵌入式操作系统&#xff0c;…
阅读更多...
【Matplotlib绘制图像大全】（二十六）：Matplotlib读取本地图像

【Matplotlib绘制图像大全】（二十六）：Matplotlib读取本地图像

前言 大家好，我是阿光。 本专栏整理了《Matplotlib绘制图像大全》，内包含了各种常见的绘图方法，以及Matplotlib各种内置函数的使用方法，帮助我们快速便捷的绘制出数据图像。 正在更新中~ ✨ 🚨 我的项目环境： 平台：Windows10语言环境：python3.7编译器：PyCharmMatp…
阅读更多...
基于SpringBoot和Vue的厨到家服务平台的设计与实现毕业设计源码063133

基于SpringBoot和Vue的厨到家服务平台的设计与实现毕业设计源码063133

springboot厨到家服务系统 摘 要 在社会快速发展的影响下&#xff0c;餐饮迅速发展&#xff0c;大大增加了餐饮服务信息管理的数量、多样性、质量等等的要求&#xff0c;使餐饮的管理和运营比过去十年更加困难。依照这一现实为基础&#xff0c;设计一个快捷而又方便的厨到家服…
阅读更多...
十二条后端开发经验分享，纯干货

十二条后端开发经验分享，纯干货

前言 本文是博主从事后端开发以来&#xff0c;对公司、个人项目的经验总结&#xff0c;包含代码编写、功能推荐、第三方库使用及优雅配置等&#xff0c;希望大家看到都能有所收获 博主github地址: github.com/wayn111 一. 优雅的进行线程池异常处理 在Java开发中&#xff0c…
阅读更多...
【Recurrent Neural Network(RNN)】循环神经网络——李宏毅机器学习阅读笔记

【Recurrent Neural Network(RNN)】循环神经网络——李宏毅机器学习阅读笔记

Recurrent Neural Network(RNN) Example Application Slot Filling 智慧订票系统&#xff1a; How to represent each word as a vector? 但是光这样&#xff0c;feedforward Network是无法solve这一问题的&#xff0c;因为他无法区别是leave Taipei还是arrive Taipei。…
阅读更多...
stable diffusion webui安装部署教程

stable diffusion webui安装部署教程

系统环境&#xff1a; 腾讯云服务器&#xff0c;centos 7.6 基础环境安装 git 安装&#xff08;直接安装高版本的&#xff09; (默认安装的是1.8 版本的。没有 -c 命令&#xff0c;需要升级&#xff09; 参考&#xff1a; https://blog.csdn.net/qq_28903377/article/detai…
阅读更多...
[附源码]Python计算机毕业设计SSM康健医药公司进销存管理系统（程序+LW)

[附源码]Python计算机毕业设计SSM康健医药公司进销存管理系统（程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
[附源码]Python计算机毕业设计SSM酒店入住管理系统（程序+LW)

[附源码]Python计算机毕业设计SSM酒店入住管理系统（程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
计算机视觉专家：如何从C++转Python

计算机视觉专家：如何从C++转Python

有人说用 Python 编程很简单&#xff0c;6 岁小孩都能学会。计算机视觉专家和编程语言爱好者 asya f 刚开始上手 Python 时也这么想。但门槛低就仅意味着使用简单吗&#xff1f;经常调用 API 的人是不是一定比可以从零写出源码的人菜&#xff1f;在本文中&#xff0c;asya f 告…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023