SDKExample, Vue

Introduction

This example uses SDK and TypeScript

The current example demonstrates interaction between TypeScript, Netty, WebSocket, Protobuf, and the game server.

This example mainly demonstrates the following aspects

1. SDK + code generation = many advantages.
2. Interacting with the server using generated interface files (action, broadcast).
3. Heartbeat handling, where each heartbeat synchronizes time with the server.
4. Interaction demonstrations include:
   • Protocol Fragment: parameter and return values of "basic types".
   • Parameter and return values of List types.
   • Parameter and return values of Protobuf object types.

In the example directory ./src/assets/gen/code, interaction interface files such as action, broadcast, error codes are generated by ionet. Code generation can significantly reduce workload for client developers and hide concepts such as routing from them.

Several Advantages of SDK Code Generation

1. Greatly reduces client-side workload and eliminates large amounts of template code.
2. Clear semantics. Generated interaction code clearly defines parameter types and whether the server returns values, and this is explicit at generation time.
3. Clear interaction interfaces ensure type-safe and explicit method parameters, so potential issues can be found at compile time. This approach effectively avoids safety risks and reduces low-level mistakes during integration.
4. Reduces communication cost between client and server teams. Code is documentation. Generated integration code includes docs and usage examples, enabling even beginners to reach zero learning cost.
5. Helps client developers abstract server interaction details so they can focus more on real business logic.
6. Reduces cognitive load in integration. Integration code is simple and as smooth as local method calls.
7. Replaces traditional protocol-oriented integration with an interface-method-oriented integration style.
8. Once Java code is completed, docs and interaction interfaces are updated in sync, without extra time spent maintaining integration docs.

Example Source Code

see https://github.com/iohao/ioGameSdkTsExampleVue

Quick Start

Start the Game Server

see https://github.com/iohao/ionet-examples

path : ionet-sdk-example

• SdkApplication

Install SDK

The current example project already has the required environment installed. For a new project, please install SDK, TypeScript

Launch Vue

For the first run after download, install the required environment

npm install

Start

npm run dev

Test

Click the button to send requests to the server and receive response data.

SDK Setup Instructions

MyNetConfig.ts file, this config file does the following:

1. Load error code and broadcast listener related modules.
2. listenMessageCallback: custom message listener.
3. netChannel: network implementation configuration, login, and heartbeat handling.
4. startNet: start ioGame SDK.

export class MyNetConfig {
    public static currentTimeMillis: bigint = BigInt(Date.now());

    static startNet() {

        // biz code init
        GameCode.init();
        listen();

        // --------- IoGameSetting ---------
        ioGameSetting.enableDevMode = true;
        // China or Us
        ioGameSetting.language = ioGameLanguage.CHINA;
        // message callback. 回调监听
        ioGameSetting.listenMessageCallback = new MySimpleListenMessageCallback();

        // socket
        ioGameSetting.url = "ws://127.0.0.1:10100/websocket";
        ioGameSetting.netChannel = new MyNetChannel();

        ioGameSetting.startNet()
    }
}

class MyNetChannel extends SimpleNetChannel {

    onOpen(event: Event) {
        // login
        const loginVerify = create(LoginVerifyMessageSchema, {jwt: "10000"});
        SdkAction.ofLoginVerify(loginVerify, result => {
            const message = result.getValue(UserMessageSchema);
            result.log(message);
        });

        // heartbeat
        const heartbeatMessage = toBinary(ExternalMessageSchema, create(ExternalMessageSchema, {}));
        setInterval(function () {
            // Send heartbeat to _server. 发送心跳给服务器
            ioGameSetting.netChannel.writeAndFlushUint8Array(heartbeatMessage);
        }, 8 * 1000);
    }
}

class MySimpleListenMessageCallback extends SimpleListenMessageCallback {

    onIdleCallback(message: NetExternalMessage) {
        const data = message.data;
        if (data === undefined || data.length === 0) return;

        /*
         * Synchronize the time of each heartbeat with that of the _server.
         * 每次心跳与服务器的时间同步
         */
        const longValue = fromBinary(LongValueSchema, data);
        MyNetConfig.currentTimeMillis = longValue.value;
    }
}

Example Source Code Directory

Remember, you do not need to write any interaction files such as action, broadcast, or error codes. These are generated by the ionet server, and you only need to focus on real business logic.

The image below shows the server source code. The TypeScript source code shown above is generated by the server.

;

About Code Generation and Usage

click here

How to Generate Related PB from .proto

After running the command, related PB files are generated according to buf.gen.yaml.

npx buf generate

buf.gen.yaml

# Learn more: https://buf.build/docs/configuration/v2/buf-gen-yaml
# npx buf generate
version: v2
inputs:
  - directory: proto
plugins:
  - local: protoc-gen-es
    out: assets/scripts/gen
    opt: target=ts

tip

see https://github.com/bufbuild/protobuf-es/blob/main/MANUAL.md#how-to-generate-code

Final Notes

Remember, you do not need to write any interaction files such as action, broadcast, or error codes. These are generated by the ionet server, and you only need to focus on real business logic.