Write the Code. Change the World.

9月 12

vite 构建的 ts 项目中,引用某些库时,遇到 Could not find a declaration file for module 的错误提示。手动在 env.d.ts 中添加一下就可以。如:

/// <reference types="vite/client" />
declare module 'element-plus/dist/locale/zh-cn.mjs'
declare module 'element-plus/dist/locale/en.mjs'
declare module 'element-plus/dist/locale/ja.mjs'
declare module 'simple-peer/simplepeer.min.js'

阅读全文 >>

9月 10

https://socket.io/zh-CN/

行为 命令
给自己发消息 socket.emit('message', '这是一条给自己的消息');
给所有人发消息 io.emit('message', '这是一条消息');
给除自己之外的人发消息 socket.broadcast.emit('message', '这是一条消息,但不发送给自己');
给房间里的人发消息 io.to('roomName').emit('message', '这是一条仅房间内用户可见的消息');
给房间里除了自己之外的人发消息 socket.broadcast.to('roomName').emit('message', '这是一条仅房间内其他用户可见的消息');
加入房间 socket.join('roomName')
离开房间 socket.leave('roomName')

阅读全文 >>

9月 09

在 vite 环境下,安装使用 simple-peer,报错 global is not defined 处理。

解决方法: https://github.com/feross/simple-peer/issues/883

这样引入就可以了:

import SimplePeer from 'simple-peer/simplepeer.min.js'

如果遇到 Could not find a declaration file for module 'simple-peer/simplepeer.min.js'. 错误。可以在 env.d.ts 中增加定义就可以。

env.d.ts

declare module 'simple-peer/simplepeer.min.js'

阅读全文 >>

8月 02

操作

有就编辑,没有就创建 .vimrc 文件

vim ~/.vimrc

增加以下配置。

set encoding=utf-8  
set fileencodings=utf-8,gbk,gb2312,gb18030,cp936,latin1  
set termencoding=utf-8

使得生效

source ~/.vimrc

阅读全文 >>

7月 25

原文: https://community.uwa4d.com/blog/detail?id=1638476203938906113

写在前面

本文我想写一下,一款游戏上线前需要做哪些事情,以保证项目上线后的稳定性。若你们公司之前没有大DAU游戏上线和运维经验,现在准备上线一款新游戏,可以按照这个RoadMap去做或者检查一遍自己游戏的上线准备工作。

本文不会写具体的操作,只是提供一个RoadMap,具体如何做大家可以自行查找相关文档。

所有的工作,都会存在一个工作量和收益的权衡。一般来说,对于大部分游戏,不需要做到100w以上的同时在线,也不需要做到100%的可用性。具体工作做到哪一步,项目根据自己的情况权衡即可,我在文中会介绍需要重点关注的地方。

这些工作,至少需要提前6个月以上的时间准备,至少需要一个资深服务端和一个靠谱的执行服务端。

阅读全文 >>

7月 01

webrtc

https://meet.livekit.io/

https://juejin.cn/post/7266417942182608955

https://github.com/wang1xiang/webrtc-tutorial/tree/master/04-one-to-one

log4js

https://blog.csdn.net/weixin_57208584/article/details/134188447

https://juejin.cn/post/7221445996135022653

日志使用:

先安装

pnpm add log4js

再创建和配置

import log4js from "log4js";

const config = {
  appenders: {
    console: { 
        type: "console",
        layout: {
            type: "pattern",
            pattern: "%d{yyyy-MM-dd hh:mm:ss} - %m", // 这里定义了时间格式
        },
    },
    file: {
      type: "dateFile",
      filename: "logs/log",
      encoding: 'utf-8',
      compress: true,
      numBackups: 7,
      keepFileExt: true,
      alwaysIncludePattern: true,
      pattern: "yyyy-MM-dd.log",
      fileNameSep: '-',
      layout: {
        type: "pattern",
        pattern: "%d{yyyy-MM-dd hh:mm:ss} - [%p] - %m", // 这里定义了时间格式
      },
    },
  },
  categories: {
    default: { appenders: ["console", "file"], level: "info" },
  },
};

let logger;
if (!logger) {
  log4js.configure(config);
  logger = log4js.getLogger();
}

export default logger;

阅读全文 >>

5月 29

fontawesome 字体。如果主题中直接引用 cdn 的字体,经常出现 404 等情况。可以将字体下载下来,放在主题目录下,使用本地的会更好。
https://fontawesome.dashgame.com/#google_vignette

获取当前主题的 url。比如存在某个主题 A,在主题 A 下有 ·/css/your-stylesheet.css 文件,就可以通过下边的方法来处理。这样渲染出来就是 https://xxx.com/xx/xx/css/your-stylesheet.css。 如果你的域名是 https://xxx.com 的话。这样就可以防止硬编码了。

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/your-stylesheet.css">

自言自语

在 wordpress 中,我安装了一个主题,在这个主题的 header.php 中,我引用了该文件夹下的一个 css 文件,怎么获取当前的 css 文件的路径呢

阅读全文 >>

5月 27

vue3 项目,配置了 ts 来开发。如果某一些组件,不使用 ts,编译的时候会报错。有时候并不是不想用 ts,只是那些文件是第三方编写的,又耦合比较高。这个时候,允许这些文件继续使用 js 来编写是一个需求。

这里以一个 LivePlayer 组件为例。

步骤

  1. 创建一个 src/components/LivePlayer/LivePlayer.vue。 部分代码如下。这里没有设置 lang='ts',也没有使用 ts 的强类型。
components<template>
    <div class="relative overflow-hidden shrink-0 w-[320px] h-[405px]">
        <div id="remoteVideo" class="w-[720px] h-[405px] ml-[-200px]"></div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const playIng = false

const urls = ref([])

function play(value) {
    urls.push(value)

    playVideo()
}

function playVideo() {
    if (playIng) {
        return
    }

    const url = urls.shift()
    if (!url) {
        return
    }

    playIng = true
    // todo
}

defineExpose({ play })
</script>
  1. tsconfig.app.json 中加入黑名单,ts 编译器对这些文件不做处理。如:
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*", "src/components/LivePlayer/LivePlayer.vue"],
  …
  1. 添加类型声明。在 typings 目录下,增加类型声明。typings 目录根据实际项目配置为准。
// 定义一个接口来描述暴露给模板的属性或方法  
interface LivePlayerExpose {  
    speakMessage: (value:string) => void
}

// 声明一个 Vue 组件实例类型,它扩展了 Vue 组件的基础类型,并添加了 LivePlayerExpose 接口  
declare type LivePlayerComponent = InstanceType<DefineComponent<{}, {}, {}, {}>> & LivePlayerExpose

declare module '@/components/LivePlayer/LivePlayer.vue' {  
    import { DefineComponent } from 'vue'

    const component: DefineComponent<{}, {}, {}, {}> & {  
        // 注意:这里我们并不直接导出 component,而是声明了它的类型  
        // 在实际使用时,Vue 会处理 component 的导出和注册  
    };  

    // 导出的是组件的实例类型,以便在模板或其他组件中引用时具有正确的类型  
    export default component
    // 导出组件实例类型以供外部使用  
    export type Instance = LivePlayerComponent
  }
  1. 项目中使用组件
components<template>
    <div class="w-full">
        <LivePlayer ref="livePlayerRef" />
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';

const livePlayerRef = ref<InstanceType<typeof LivePlayer> | null>(null)

onMounted(() => {
    livePlayerRef.value?.play("xxx")
})
</script>

阅读全文 >>