2025.1 最近的一些事情，解决的一些问题

简单说说 reactCompiler

Next.js 15，React.js 19 更新挺久了，随之一并带来的是 reactCompiler 等待了不知多久的 beta 版本，简单试了下 Next.js 集成，体验还不错，具体步骤就看 官方文档

简单来说装一个 babel 插件

shell
1pnpm install babel-plugin-react-compiler

然后开 experimental 功能就行了，在 next.config.ts

typescript
1import type { NextConfig } from 'next'
2 
3const nextConfig: NextConfig = {
4  experimental: {
5    reactCompiler: true,
6  },
7}
8 
9export default nextConfig

开了之后，它会自动优化我们的代码，比如 useMemo useCallback 这种缓存的使用，会尽量避免多次频繁重新渲染，组件频繁清空数据整个渲染和挂载，...emm 怎么说，感觉 React 也开始借鉴 Vue 了，变成自动档了，可以自己优化了

显示 ip 归属地的实现

最近用 maxmind 的 geoip2 库补全我 ipv6 归属地的显示，正好说一下这个的完整实现。

xml
1<!--这个仅支持ipv4-->
2<dependency>
3    <groupId>org.lionsoul</groupId>
4    <artifactId>ip2region</artifactId>
5     <version>2.7.0</version>
6</dependency>
7
8<!--支持ipv4 ipv6，但是感觉效果不是很好-->
9<dependency>
10    <groupId>com.maxmind.geoip2</groupId>

首先到其开源仓库下载数据集：ip2region

将 ip2region.xdb 放好在 src/main/resources

同样如法炮制，下载 maxmind 的数据集，由于其商业版本收费，我们只能选择：GeoLite.mmdb

拿到 GeoLite2-City.mmdb 和 GeoLite2-ASN.mmdb

我们可以写一个 IPLocationUtil

java
1package com.grtsinry43.grtblog.util;
2
3import com.maxmind.geoip2.DatabaseReader;
4import com.maxmind.geoip2.model.AsnResponse;
5import com.maxmind.geoip2.model.CityResponse;
6import jakarta.servlet.http.HttpServletRequest;
7import org.apache.commons.lang3.StringUtils;
8import org.lionsoul.ip2region.xdb.Searcher;
9import org.slf4j.Logger;
10import org.slf4j.LoggerFactory;

还有一件事情哦，如果你使用 nginx 或 docker 部署，很可能会出现拿不到 ip 的情况，比如 nginx 中，我们要转发好访客的 ip

conf
1location /api/v1 {
2        rewrite ^/api/v1/(.*)$ /$1 break;
3        proxy_pass http://127.0.0.1:8080;
4        proxy_set_header Host $http_host;
5        proxy_set_header X-Real-IP $remote_addr;
6        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
7        proxy_set_header X-Forwarded-Proto $scheme;
8    }

全站更新通知的实现

这个是我最近加的一点点小功能，希望给站点加一点活力吧，毕竟我这都没几个人看 （让我难受的很啊）

双向通知当然是 websocket 的能力，而我们加到 socket 连接之后，如何告诉其他组件呢？

对了！可以使用 MessageChannel，可以看下 MDN 的文档

这是浏览器的一个原生能力，我们在两个端口 port1 port2 之间可以实现消息的传递，通过在一个端口发送消息，一个端口监听消息，我们就可以实现很多功能啦（有点像 electron 的 ipc，node 的 emitter）

我们就先创建一个公共实例：

typescript
1// frontend/src/utils/channel.ts
2const channel = new MessageChannel();
3export default channel;

在socket收到事件时候：

typescript
1// 用于发送更新通知
2        newSocket.on("updateNotification", (content) => {
3            console.log(content);
4            channel.port2.postMessage({
5                content: content,
6                publishAt: new Date().toISOString(),
7            });
8        });

另一面便可以处理啦：

typescript
1useEffect(() => {
2    // 这里是为了消息定时关闭
3        let timer: NodeJS.Timeout;
4        channel.port1.onmessage = (event) => {
5            const res = event.data;
6            if (res) {
7                setNotification(res);
8                setShow(true);
9                timer = setTimeout(() => setShow(false), 10000);
10            }