【腾讯云Cloud Studio实战训练营】构建基于React的实时聊天应用

2023-07-28 09:07:13

在这里插入图片描述

关于腾讯云 Cloud Studio

腾讯云 Cloud Studio 是基于浏览器的集成式开发环境 (IDE)，通过“基于浏览器开发”我们可以将它通俗理解为“在线编程平台”，在使用 Cloud Studio 开发时不需安装什么工具，直接在浏览器打开 Cloud Studio 就可以进行开发。

在这里插入图片描述
作为腾讯的一款全新云原生开发平台，Cloud Studio 的宗旨是帮助开发者高效构建、部署和管理应用程序，它的强大之处在于提供了一套全方位的工具和服务，包括代码编辑、代码构建、测试、部署等全流程开发，使得开发者在云端就可以进行全栈开发，并轻松实现应用的快速迭代和交付。腾讯云 Cloud Studio 主要功能列举如下：

  • 云端开发环境：Cloud Studio 提供了一个完整的云端开发环境，无需本地配置开发环境，开发者可以直接在浏览器中进行代码编辑、调试和运行。
  • 全栈支持：支持多种编程语言和框架，包括 JavaScript、Node.js、Python、Java、PHP、C、Rust 等几乎全平台的主流开发语言，同时支持前端开发和移动应用开发，满足各类应用的开发需求。
  • 协作与分享：Cloud Studio 支持团队协作开发，开发者可以轻松分享代码和项目，实现多人协同开发，提高开发效率。
  • 部署与扩展：Cloud Studio 集成了腾讯云的强大云计算资源，可以直接在 Cloud Studio 中进行应用部署和扩展，简化应用上线流程。
  • 丰富的工具集：Cloud Studio 提供了丰富的开发工具和插件，包括代码编辑器、调试器、代码库、性能监控等，助力开发者提高开发效率和应用质量。
  • SSH连接能力：具备 SSH 连接能力，可以将用户安全连接到云端工作空间里，更方便地连接云资源。
  • 标准化的云端安装部署能力：支持主流代码仓库的云端克隆。

其实光靠介绍某一个工具怎么怎么好就想让人信服是不太现实的，接下来我们就使用 Cloud Studio 来进行实际项目的开发，通过项目实战来体验它的强大之处。本文将演示如何在 Cloud Studio 中构建基于 React 框架的在线聊天应用。

构建基于 Cloud Studio 的聊天应用（项目实战）

1. 注册并登录 Cloud Studio

注册与登录步骤很简单，Cloud Studio 在线编程平台支持 Coding 账号、GitHub 账号及微信授权三种方式登录。这里我使用的是微信扫码授权登录，登录成功即注册成功；

在这里插入图片描述
登录成功进入 Cloud Studio 主页面如下。

在这里插入图片描述

2. 配置 Git 环境

配置 GIt 环境是为了将我们开发的作品以及代码上传至相关 GIt 代码托管平台，如 GitHub、Coding、Gitee、GitCode 等，可根据个人需要选择配置。在这里我使用的是 Gitee 码云进行相关操作。

2.1 复制 SSH 公钥

点击头像→设置；

在这里插入图片描述
复制个人专属的 SSH 公钥；

在这里插入图片描述

2.2 添加 SSH 公钥至 GIt 平台

这里的操作是将 Cloud Studio 工作空间的 SSH Key 添加至 Gitee 代码托管平台的个人公钥列表。点击头像→账号设置；

在这里插入图片描述
点击 SSH公钥，将我们上一步 Cloud Studio 平台中复制的 SSH 公钥复制到此处，这里的标题可以自行设置；

在这里插入图片描述
最后点击确认添加。

3. 创建项目

点击框架模板→React；

在这里插入图片描述
等待工作空间加载完成；

在这里插入图片描述
安装依赖（自动安装）；

在这里插入图片描述
接下来运行 React 项目的示例代码，需要注意首次运行可能会报错（踩坑），这个时候建议删除工作空间，重新创建一个空间来运行；

在这里插入图片描述
输入命令 npm run start 运行 React 实例代码，当出现如下图中的 React 图标时，项目就创建完成了。

在这里插入图片描述

4. 项目开发

4.1 安装依赖

yarn add react-jwchat

在这里插入图片描述

注：该组件是来源于 gitee.com/wx_504ae56474/react-jwchat 的免费模板。

4.2 集成 tailwind css

yarn add tailwindcss
npx tailwindcss init

配置模板路径，在文件 tailwind.config.js 中；

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 index.css 文件中添加以下内容；

@tailwind base;
@tailwind components;
@tailwind utilities;

接下来安装 Tailwind CSS 插件，插件安装完成之后，就可以进行代码的编写了。

在这里插入图片描述

4.3 编写代码

将 App.js 中的 App 方法进行修改，代码如下；

function App() {
  const handleNewUserMessage = (newMessage) => {
    console.log(`New message incoming! ${newMessage}`);
    // Now send the message throught the backend API
  };
  const contact = {
    id: 16,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Jinx.png',
    nickname: '金克丝',
    message: '这是一条信息',
    date: '02-11',
    desc: '一行简短的简介',
  };
  const my = contact;
  const msgList = [
    {
      _id: '75b5bde8f3b9ef7aa9b704492cb28baf',
      date: 1610016580,
      user: {
        id: 1234,
        avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
        nickname: 'sirosong',
        desc: '这是我的第一条信息',
      },
      message: { type: 'text', content: '敌我打野差距👎 ' },
    },
    {
      _id: '75b5bde8f3b9ef7aa904492cb28baf',
      date: 1610016880,
      user: {
        id: 9527,
        avatar: '//game.gtimg.cn/images/lol/act/img/champion/Khazix.png',
        nickname: '卡兹克',
        desc: '这是我的第一条信息',
      },
      message: {
        type: 'image',
        content: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
      },
    },
  ];
  return (
    <div className="App">
      <Chat
        contact={contact}
        me={my}
        chatList={msgList}
        onSend={(msg) => { }}
        onEarlier={() => { }}
        onImage={(files) => { }}
        style={{
          width: 600,
          height: 500,
        }}
      />
    </div>
  );
}

注：以下内容是对上述代码中对象及函数的解读，以帮助大家理解代码逻辑：

▶ Contact 聊天客体对象

  • Id：用户 id
  • Avatar：用户头像地址
  • Nickname：用户昵称
  • Message：消息，这里目测是对话列表会用到的
  • Date：时间，这里目测是对话列表会用到的
  • Desc：简介，会在聊天框内显示
{
    id: 16,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Jinx.png',
    nickname: '金克丝',
    message: '这是一条信息',
    date: '02-11',
    desc: '一行简短的简介',
};

▶ MsgList 消息列表

消息列表分为两种类型(文本 text，图片 image)；某一则消息是文本消息还是图片消息是通过 message.type 的值来判断的，text 代表文本消息，在 content 中放的是要显示的文本内容；image 代表图片消息，content 中只要放图片地址即可。如果是正式部署服务器，那么这部分内容应当自动将图片上传到图片服务器，然后返回图片地址。

  • _id：消息 id，这里是文本类型的，可以用uuid
  • Date：收到消息的日期
  • User：同 Contact 用的
  • Message：消息体，使用 type 来区分类型，content 是消息主体
{
    _id: '75b5bde8f3b9ef7aa9b704492cb28baf',
    date: 1610016580,
    user: {
        id: 1234,
        avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
        nickname: 'sirosong',
        desc: '这是我的第一条信息',
    },
    message: {
        type: 'text',
        content: '敌我打野差距👎 '
    },
},

▶ onSend 发送消息回调函数

传入的参数为 Msg 对象，如下图；

在这里插入图片描述
为了演示方便可以直接将其加入到 msgList，此时我这里将回调函数做了以下更改；

//...
function handleSendMessage(msg){
    console.log(msg);
    msgList.push(msg);
  }
//...
<Chat
        contact={contact}
        me={my}
        chatList={msgList}
        onSend={(msg) => handleSendMessage(msg)}
        onEarlier={() => { }}
        onImage={(files) => { }}
        style={{
          width: 600,
          height: 500,
        }}
      />

▶ onEarlier 加载更多回调函数

该函数格式如下：

functi用的on handleOnEarlier(){
    // 处理加载更多
  }

▶ onImage 上传图片回调函数

一般是将图片上传到服务器，返回图片 url，然后再将消息加到聊天框里面。该函数格式如下：

function handleOnImage(files){
    // 处理上传图片
  }

4.4 项目运行示例

代码编写完毕，运行项目可看到以下结果；

在这里插入图片描述
接下来我们发送一则消息测试是否能发送成功。效果如下：

在这里插入图片描述

项目完整代码及 Cloud Studio 模板地址

这里附上以上项目的完整代码。本模板已发布到腾讯云 Cloud Studio 上作为公共模板使用，可直接创建应用，对接你自己的 API，代码中有详细注释。

腾讯云 Cloud Studio 项目模板地址： 「chat_react」

项目完整代码：

import React from 'react';
import { Chat, ContactList } from 'react-jwchat'
import 'react-chat-widget/lib/styles.css';

function App() {
  /**
   * 当前联系人
   *  为当前所选择的联系人对象
   */
  let contact = {
    id: 16,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Jinx.png',
    nickname: '金克丝',
    message: '这是一条信息',
    date: '02-11',
    desc: '一行简短的简介',
  };

  /**
   * 自己信息
   *  该对象为当前所登陆的账户信息
   */
  const my = {
    id: 1234,
    avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
    nickname: 'sirosong',
    desc: 'carry大神'
  };

  /**
   * 联系人列表
   *  左侧联系人列表数据，获取到联系人列表以后，替换或修改该数组
   */
  let contactList = [{
    id: 1,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Fizz.png',
    nickname: '菲兹',
    message: '你抓不到我！',
    date: '02-07'
  }, {
    id: 8,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Khazix.png',
    nickname: '卡兹克',
    message: '❓',
    date: '02-07'
  }, {
    id: 7,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Jayce.png',
    nickname: '杰斯',
    message: '吃我一炮',
    date: '02-07'
  }, {
    id: 16,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Jinx.png',
    nickname: '金克丝',
    message: '起飞🤣 ！！！',
    date: '02-07'
  }, {
    id: 2,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Vladimir.png',
    nickname: '弗拉基米尔',
    message: '让我嘬一口...',
    date: '02-07'
  }, {
    id: 3,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/XinZhao.png',
    nickname: '阿信',
    message: '寒芒，我是寒芒！',
    date: '02-07'
  }, {
    id: 4,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Caitlyn.png',
    nickname: '凯特琳',
    message: '超级瞄准已部署。',
    date: '02-07'
  }, {
    id: 5,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Teemo.png',
    nickname: '提莫',
    message: '这波团我想活下来',
    date: '02-07'
  }, {
    id: 6,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Volibear.png',
    nickname: '沃利贝尔',
    message: '熊大呢？',
    date: '02-07'
  }, {
    id: 9,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Rengar.png',
    nickname: '雷恩加尔',
    message: '您已被该玩家禁言',
    date: '02-07'
  }, {
    id: 11,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Chogath.png',
    nickname: '科加斯',
    message: '您已被该玩家禁言',
    date: '02-07'
  }, {
    id: 12,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Amumu.png',
    nickname: '阿木木',
    message: '您已被该玩家禁言这是我的第一条信这是我的第一条信',
    date: '02-07'
  }, {
    id: 13,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Draven.png',
    nickname: '德莱文',
    message: '您已被该玩家禁言',
    date: '02-07'
  }, {
    id: 14,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Lucian.png',
    nickname: '卢锡安',
    message: '您已被该玩家禁言',
    date: '02-07'
  }, {
    id: 15,
    avatar: '//game.gtimg.cn/images/lol/act/img/champion/Diana.png',
    nickname: '黛安娜',
    message: '您已被该玩家禁言',
    date: '02-07'
  }];

  /**
   * 消息列表
   *  如果有消息到达，则加入到这个数组中，如果觉得反映比较慢，自己主动调用渲染
   */
  let msgList = [{
    _id: 'ecbb310507ce9c7d3bd57eca046a80f3',
    date: 1610016423,
    user: {
      id: 1234,
      avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
      nickname: 'sirosong',
      desc: '这是我的第一条信息'
    },
    message: {
      type: 'text',
      content: '打野你会玩吗？'
    }
  }, {
    _id: 'f3386f6dcf4e69a8bd51a0d688d05580',
    date: 1610016470,
    user: {
      id: 9527,
      avatar: '//game.gtimg.cn/images/lol/act/img/champion/Khazix.png',
      nickname: '卡兹克',
      desc: '这是我的第一条信息'
    },
    message: {
      type: 'text',
      content: '❓ '
    }
  }, {
    _id: 'f3386f6dcf4e69a8bd51a0d688d0e980',
    date: 1610016470,
    user: {
      id: 1234,
      avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
      nickname: 'sirosong',
      desc: '这是我的第一条信息'
    },
    message: {
      type: 'text',
      content: '对面下路压线那么深你不来？'
    }
  }, {
    _id: '75b5bde8f3b9ef7aa9b704492cb28baf',
    date: 1610016580,
    user: {
      id: 1234,
      avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
      nickname: 'sirosong',
      desc: '这是我的第一条信息'
    },
    message: {
      type: 'text',
      content: '敌我打野差距👎 '
    }
  }, {
    _id: '75b5bde8f3b9ef7aa9b70449244444cb28baf',
    date: 1610016880,
    user: {
      id: 1234,
      avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
      nickname: 'sirosong',
      desc: '这是我的第一条信息'
    },
    message: {
      type: 'image',
      content: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623381551&t=1ec0b6fdbfc4ba9f149281c1d5f8e370'
    }
  }, {
    _id: '75b5bde8f3b9ef7aa9b4492cb28baf',
    date: 1610016580,
    user: {
      id: 1234,
      avatar: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png',
      nickname: 'sirosong',
      desc: '这是我的第一条信息'
    },
    message: {
      type: 'text',
      content: '敌我打野差距👎 '
    }
  }, {
    _id: '75b5bde8f3b9ef7aa904492cb28baf',
    date: 1610016880,
    user: {
      id: 9527,
      avatar: '//game.gtimg.cn/images/lol/act/img/champion/Khazix.png',
      nickname: '卡兹克',
      desc: '这是我的第一条信息'
    },
    message: {
      type: 'image',
      content: '//game.gtimg.cn/images/lol/act/a20201103lmpwjl/icon-ht.png'
    }
  }];
  /**
   * 处理发送消息
   * @param msg 
   */
  function handleSendMessage(msg) {
    console.log(msg);
    msgList.push(msg);
  }

  /**
   * 联系人列表选择触发事件
   * @param cat 
   */
  function handleContactListSelected(cat){
    console.log(cat);
    contact = cat;
  }

  /**
   * 处理上传图片
   * @param files 
   */
  function handleOnImage(files){
    // 处理上传图片
  }

  /**
   * 处理加载更多
   */
  function handleOnEarlier(){
    // 处理加载更多
  }

  return (
    <div className="App">
      <div class="flex items-center justify-center max-h-full">
        <ContactList
          data={contactList}
          onSelect={(contact) => handleContactListSelected(contact)}
          style={{
            height: 600,
          }}
        />
        <Chat
          contact={contact}
          me={my}
          chatList={msgList}
          onSend={(msg) => handleSendMessage(msg)}
          onEarlier={() => handleOnEarlier()}
          onImage={(files) => handleOnImage(files)}
          style={{
            width: 600,
            height: 600,
          }}
        />
      </div>
    </div>
  );
}

export default App;

个人开发体验

通过这次使用腾讯云 Cloud Studio 进行聊天应用的搭建，作为一名开发者我深刻感受到了 腾讯云 Cloud Studio 云端开发环境为我们带来的高效便捷。

开发者应该都深有体会，其实写代码本身也没多大难度，但开发环境的搭建很多时候可能都不会那么的顺利，不是这里环境有问题，就是那里版本不对，或者一点点的小 bug，整个过程很让人抓狂。腾讯云 Cloud Studio 首先就为我们规避了这一点，开发时无需在本地配置繁琐的开发工具和环境，只需通过浏览器进入云端 IDE，就可以随时随地进行开发和调试。更有几乎全平台项目模板的提供。

其次 Cloud Studio 支持多种编程语言和框架，这让我有更多的自由选择，可根据项目需求灵活切换，只需要在一个平台就完成整个应用的开发，无需再花费时间去集成不同的工具。此外 CloudStudio 还提供了一系列自动化测试工具和框架，这可以大大提高代码质量，减少了发现缺陷的时间。其实最令我印象深刻的还是 Cloud Studio 的协作和分享功能，可以链接形式轻松分享代码和项目，随时随地不同成员协作开发。无论是对于团队还是个人，这样的协作方式都大大提高了开发效率。总体来说这次使用腾讯云 Cloud Studio 来开发实时聊天应用，让我感受到了更高效、更安全、更便捷的开发体验，我认为它是一个非常棒的云端开发平台。

个人使用建议

在使用建议方面，我首先觉得启动工作空间的速度不是很快，下面这张图是我开发完成聊天应用之后，关闭项目重新打开工作平台时的页面。毫不夸张，在这个页面我等待了超过 3 分钟的时间，体验一般。况且我的项目只能算是一个微型项目。要是开发者开发的是一大型项目，那么光每次启动就得耗费多长时间呢？强烈建议及时提高这个方面的性能。

在这里插入图片描述
其次 Cloud Studio 中还可以增加更多的开发环境支持，目前来看确实是几乎全平台，但更多的是主流开发语言适用。还有一些较为冷门的语言和框架未得到更好的支持。其次希望 Cloud Studio 能够提供更加友好和易用的用户界面，帮助开发者更快速地上手和使用云平台上的开发工具。相信腾讯云 Cloud Studio 在未来的发展中会取得更大的进步和成就。

更多推荐

“熊猫杯” | 赛宁网安获网络安全优秀创新成果大赛优胜奖

9月11日，四川省2023年国家网络安全宣传周正式启动。由四川省委网信办指导，中国网络安全产业联盟（CCIA）主办，成都信息工程大学、四川省网络空间安全协会承办的“2023年网络安全优秀创新成果大赛—成都分站赛(暨四川省‘熊猫杯’网络安全优秀作品大赛)”落下帷幕。赛宁网安凭借主动防御安全网格解决方案脱颖而出，荣获大赛优

Hadoop源码阅读（一）：NameNode启动

说明：1.Hadoop版本：3.1.32.阅读工具：IDEA2023.1.23.源码获取：Indexof/dist/hadoop/core/hadoop-3.1.3(apache.org)4.工程导入：下载源码之后得到hadoop-3.1.3-src.tar.gz压缩包，在当前目录打开PowerShell，使用tar-

C++中按引用传递参数

C++中按引用传递参数实参通常是通过值传递给函数的，这意味着形参接收的只是发送给它们的值的副本，它们存储在函数的本地内存中。对形参值进行的任何更改都不会影响原始实参的值。然而，有时候可能会希望一个函数能够改变正在调用中的函数（即调用它的函数）中的一个值，这可以通过引用传递的方式来完成。我们知道，变量是可以保存数据的内存

Linux 内存泄漏检测的基本原理

一、mtrace分析内存泄露mtrace（memorytrace），是GNUGlibc自带的内存问题检测工具，它可以用来协助定位内存泄露问题。它的实现源码在glibc源码的malloc目录下，其基本设计原理为设计一个函数voidmtrace()，函数对libc库中的malloc/free等函数的调用进行追踪，由此来检测

【送面试题】Linux中grep和find的区别及全面使用指南

AI绘画关于SD,MJ,GPT,SDXL百科全书面试题分享点我直达2023Python面试题2023最新面试合集链接2023大厂面试题PDF面试题PDF版本java、python面试题项目实战:AI文本OCR识别最佳实践AIGamma一键生成PPT工具直达链接玩转cloudStudio在线编码神器玩转GPUAI绘画、A

模型训练中的常见超参数解析

目录超参数学习率——lrbatch_sizenum_workersseed随机种子超参数学习率——lr数据集大小与学习率的调整有一定的关系，但并不是唯一决定学习率的因素。学习率的选择通常需要进行实验和调整，以找到最佳的学习率值，而这个最佳值可能会受到数据集大小的影响。下面是一些关于数据集大小和学习率调整的一般原则：1.

java面试题-jvm面试题

java面试题-jvm面试题1JVM组成面试官：JVM由那些部分组成，运行流程是什么？候选人:嗯，好的~~在JVM中共有四大部分，分别是ClassLoader（类加载器）、RuntimeDataArea（运行时数据区，内存分区）、ExecutionEngine（执行引擎）、NativeMethodLibrary（本地库

恒合仓库 - 用户管理、用户列表、为用户分配角色

文章目录用户管理一、用户列表1.1实体类1.1.1分页实体类1.1.2用户信息实体类1.2业务实现1.2.1UserMapper1.2.2Service层1.2.3Controller层1.2.4效果图二、用户增删改查2.1添加用户业务实现2.1.1Mapper2.1.2Service2.1.3Controller2.

BUU [HCTF 2018]Hideandseek

BUU[HCTF2018]Hideandseek考点：软连接读取任意文件Flask伪造session/proc/self/environ文件获取当前进程的环境变量列表random.seed()生成的伪随机数种子MAC地址(存放在/sys/class/net/eth0/address文件)国赛的时候遇见过软连接，这次再来

Redis缓存

目录什么是缓存？缓存特性1、缓存雪崩2、缓存穿透3、缓存击穿4、缓存预热什么是缓存？在程序中如果没有设置缓存的时候，用户想要获取到数据一般都是直接从数据库中获取。加入缓存之后会这样执行我们都知道查询数据库是一个比较慢的过程，对用户而言这样的体验是非常不好的。加入缓存之后，查询数据就会先在缓存中查找，如果缓存中没有才会去

C++项目实战——基于多设计模式下的同步&异步日志系统-⑨-同步日志器类与日志器建造者类设计

文章目录专栏导读Logger类设计同步日志器类设计同步日志器测试日志器建造者模式设计抽象日志器建造者类派生局部日志器建造者日志器建造者类测试同步日志器类与日志器建造者类整理专栏导读🌸作者简介：花想云，在读本科生一枚，C/C++领域新星创作者，新星计划导师，阿里云专家博主，CSDN内容合伙人…致力于C/C++、Linu

热文推荐
  1. 将 Pandas 换为交互式表格的 Python 库

    Pandas是我们日常处理表格数据最常用的包，但是对于数据分析来说，Pandas的DataFrame还不够直观，所以今天我们将介绍4个Python包，可以将Pandas的DataFrame转换交互式表格，让我们可以直接在上面进行数据分析的操作。PivottablejsPivottablejs是一个通过IPythonwi

  2. 【Zabbix监控一】zabbix的原理与安装

    利用一个优秀的监控软件，我们可以:●通过一个友好的界面进行浏览整个网站所有的服务器状态●可以在Web前端方便的查看监控数据●可以回溯寻找事故发生时系统的问题和报警情况总结：zabbix主要功能监控，cpu负载，内存使用，硬盘使用，网络状态，端口监视，日志监视，插件开发自定义zabbixserver端口号：10500za

  3. 【系统架构】分布式系统架构设计

    1分布式系统是什么分布式系统是指由多个计算机节点组成的一个系统，这些节点通过网络互相连接，并协同工作完成某个任务。与单个计算机相比，分布式系统具有更高的可扩展性、可靠性和性能等优势，因此广泛应用于大规模数据处理、高并发访问、分布式存储等领域。分布式系统的设计目标是将计算机资源、数据和控制权分布在多个节点上，以提高系统的

  4. 使用GGML和LangChain在CPU上运行量化的llama2

    MetaAI在本周二发布了最新一代开源大模型Llama2。对比于今年2月发布的Llama1，训练所用的token翻了一倍，已经达到了2万亿，对于使用大模型最重要的上下文长度限制，Llama2也翻了一倍。在本文，我们将紧跟趋势介绍如何在本地CPU推理上运行量化版本的开源Llama2。量化快速入门我们首先简单介绍一下量化的

  5. 决策树的划分依据之：信息增益率

    在上面的介绍中，我们有意忽略了"编号"这一列.若把"编号"也作为一个候选划分属性，则根据信息增益公式可计算出它的信息增益为0.9182，远大于其他候选划分属性。计算每个属性的信息熵过程中,我们发现,该属性的值为0,也就是其信息增益为0.9182.但是很明显这么分类,最后出现的结果不具有泛化效果.无法对新样本进行有效预测

  6. 网络安全（黑客）自学

    前言1.不要试图以编程为基础的学习开始学习我在之前的回答中，我都一再强调不要以编程为基础再开始学习网络安全，一般来说，学习编程不但学习周期长，而且实际向安全过渡后可用到的关键知识并不多一般人如果想要把编程学好再开始学习网络安全往往需要花费很长时间，容易半途而废。而且学习编程只是工具不是目的，我们的目标不是成为程序员。建

  7. 重新理解 RocketMQ Commit Log 存储协议

    最近突然感觉：很多软件、硬件在设计上是有rootreason的，不是bydesgin如此，而是解决了那时、那个场景的那个需求。一旦了解后，就会感觉在和设计者对话，了解他们的思路，学习他们的方法，思维同屏：活到老学到老。问题思考1、ConsumerQueueOffset是连续的吗，为什么？2、CommitLogOffse

  8. Rust 数据类型 之 结构体（Struct）

    目录结构体（Struct）定义与声明结构体定义结构体实例结构体分类单元结构体（UnitStruct）元组结构体（TupleStruct）具名结构体（NamedStruct）结构体嵌套结构体方法例1：结构体转换为字符串描述例2：矩形的周长和面积例3：结构体字段的更新与输出关联函数结构体方法与关联函数的区别参数传递方式的区

  9. 爬虫工作者必备：使用爬虫IP轻松获得最强辅助

    目录一、爬虫IP的作用与优势二、选择合适的爬虫IP服务商三、使用爬虫IP的注意事项和技巧代码示例四、合法合规使用爬虫IP总结随着互联网的发展，数据已经成为企业竞争的核心资源。而获取这些数据的有效方式，就是通过爬虫技术。但是，爬虫在运行过程中很可能会触及到目标网站的限制，从而被禁止访问甚至封号。为了解决这个问题，我们可以