[译] 使用 Go 和 ReactJS 构建聊天系统 (一)

2024-03-15 15:32

本文主要是介绍[译] 使用 Go 和 ReactJS 构建聊天系统 (一),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 

本节完整代码:GitHub

我们将通过设置两个项目来开始这个课程。一旦我们完成了枯燥的设置,就可以开始添加新功能并构建我们的应用程序,将看到一些积极的结果!

目标

在这部分课程结束后,你将掌握:

  • 在 backend/ 目录里创建基本的 Go 应用
  • 在 frontend/ 目录里创建基本的 ReactJS 应用

通过实现这两个部分,你将能够在接下来的几节课程中为聊天系统添加一些功能。

准备工作

为了完成本系列教程,我们先要做以下的准备工作。

  • 需要安装 npm
  • 需要安装 npx。这个可以输入 npm install -g npx 安装。
  • Go 语言版本需要满足 1.11+。
  • 需要一个代码编辑器来开发这个项目,例如 VS

设置 Go 后端项目

如果你熟悉 Go 的话,这一步非常简单,我们首先要在项目目录中创建一个名为 backend 的新目录。

这个 backend 目录将包含该项目的所有 Go 代码。然后,我们将通过以下命令来初始化我们的项目:

$ cd backend
$ export GO111MODULE=on
$ go mod init github.com/TutorialEdge/realtime-chat-go-react
复制代码

应该在 backend 目录中使用 go modules 初始化我们的项目,初始化之后我们就可以开始写项目并使其成为一个完整的 Go 应用程序。

  • go.mod - 这个文件有点像 NodeJS 项目中的 package.json。它详细描述了我们项目所需的包和版本,以便项目的构建和运行。
  • go.sum - 这个文件用于校验,它记录了每个依赖库的版本和哈希值。

注意 - 有关 Go modules 新特性的更多信息,请查看官方 Wiki 文档: Go Modules

检查 Go 项目

一旦我们在 backend/ 目录中调用了 go mod init,我们将检查一下一切是否按预期工作。

在 backend/ 目录中添加一个名为 main.go 的新文件,并在其中添加以下 Go 代码:

package mainimport "fmt"func main() {fmt.Println("Chat App v0.01")
}
复制代码

将该内容保存到 main.go 后,运行后会得到如下内容:

$ go run main.go
Chat App v0.01
复制代码

如果成功执行,我们可以继续设置我们的前端应用程序。

设置 React 前端项目

设置前端会稍微复杂一点,首先我们要在项目的根目录中创建一个 frontend 目录,它将容纳我们所有的 ReactJS 代码。

注意 - 我们将使用 facebook/create-react-app 来生成我们的 React 前端。

$ cd frontend
复制代码

然后,你需要使用 create-react-app 包创建一个新的 ReactJS 应用程序。这可以用 npm 安装:

$ npm install -g create-react-app
复制代码

安装完成后,你应该能够使用以下命令创建新的 ReactJS 应用程序:

$ npx create-react-app .
复制代码

运行这些命令之后,你应该可以看到我们的 frontend/ 目录生成了基本的 ReactJS 应用程序。

我们的目录结构应如下所示:

node_modules/
public/
src/
.gitignore
package.json
README.md
yarn.lock
复制代码

本地运行 ReactJS 程序

现在已经成功创建了基本的 ReactJS 应用程序,我们可以测试一下是否正常。输入以下命令来运行应用程序:

$ npm start
复制代码

如果一切正常的话,将会看到 ReactJS 应用程序编译并在本地开发服务器上运行:http://localhost:3000

Compiled successfully!You can now view frontend in the browser.Local:            http://localhost:3000/On Your Network:  http://192.168.1.234:3000/Note that the development build is not optimized.
To create a production build, use yarn build.
复制代码

现在已经拥有有一个基本的 ReactJS 应用程序了,我们可以在接下来的教程中进行扩展。

总结

太棒了,现在已经成功设置了我们项目的前端和后端部分,接下来我们可以添加一些酷炫的新功能。

这篇关于[译] 使用 Go 和 ReactJS 构建聊天系统 (一)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/812432

相关文章

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

Go标准库常见错误分析和解决办法

《Go标准库常见错误分析和解决办法》Go语言的标准库为开发者提供了丰富且高效的工具,涵盖了从网络编程到文件操作等各个方面,然而,标准库虽好,使用不当却可能适得其反,正所谓工欲善其事,必先利其器,本文将... 目录1. 使用了错误的time.Duration2. time.After导致的内存泄漏3. jsO

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain