What is? WebAssembly? from GoogleMicrosoftMozillaApple And so on WebAssembly Is a new bytecode format , Mainstream browsers already support WebAssembly. and JS Need to explain the difference in execution ,WebAssembly Bytecode is very similar to the underlying machine code, which can be loaded and run quickly , So the performance is relative to JS Explain that execution has greatly improved .WebAssembly It's not a programming language , It's a bytecode standard , We need to compile bytecode in advanced programming language and put it in WebAssembly Virtual machine to run .

Panzr.io brief introduction

  • Games based on open source technology
  • Use Web As a distribution platform
  • Light and fast
  • Explore basic multiplayer Technology
  • Expand Go technical knowledge

Panzr.io framework

Panzr.io Deployment architecture

Triebwerk brief introduction

Project source code :

project Status:

  • Triebwerk Is an open source multiplayer game server
  • Use Go Language writing
  • Now it's just the basic prototype

How the game works ?

Server authority Architecture

  • Communicate only through the server
  • The client sends all input to the server
  • The server has the right to simulate
  • Prevent cheating and introduce delays

Client prediction and server coordination

  • The earliest by QuakeWorld Extension
  • Local simulation movement
  • Constantly synchronize with server state
  • Correct local state based on server state

Client side interpolation

  • net update (Updates) < Frames per second (Frames)
  • Interpolation between past states
  • Conservative algorithm
  • No inference

Define boundaries

Limit :

  • All the game logic is just 2D In the space
  • Uniform surface
  • Input control via keyboard only
  • Limit map size
  • Slow moving vehicles
  • There's no physical engine

Server implementation

Players move

collision detection

Binary data transfer

  • Minimize resource use
  • Prevent packet fragmentation
  • Minimize the impact of packet loss

WebAssembly modular

The game logic (Game logic)Server -> Client

  • file size > 2MB
  • The server and the client compute state based on the same logic
  • Data transfer through binary type

compile :

GOOS=js GOARCH=wasm go build -o tanks.wasm cmd/wasm/tanks.go

Client:

<script src="/game/wass_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(featch("/game/tanks.wass"), go.importObject).then(result => {
go.run(result.instance);
});
</script>

Server:

js.Global().Set("updateNetworkPlayer", js.FuncOf(updateNetworkPlayer))

stay Go Code in state

posX := float32(30.457777)
posY := float32(10.336666)
buf := make([]byte, 8) binary.LittleEndian.PutUint32(buf[0:], math.Float32bits(posX))
binary.LittleEndian.PutUint32(buf[4:], math.Float32bits(posY)) var uint8Array = js.Global().Get("Uint8Array")
dst := uint8Array.New(len(buf))
js.CopyBytesToJS(dst, buf)

stay Javascript Medium decoding state

let dv = new DataView(state.buffer)
let posX = dv.getFloat32(0, true)
let posY = dv.getFloat32(4, true)

Try online

http://panzr.io

Refs

 I'm for less 
WeChat :uuhells123
official account : Hacker afternoon tea
Add me WeChat ( Learn from each other ), Official account ( Get more learning materials ~)

Explore the use of Golang and Webassembly More articles on building a multiplayer game server

  1. Use .net core stay Ubuntu Construct a TCP The server

    Introduction and background TCP Programming is one of the most interesting parts of network programming . stay Ubuntu Environment , I like to use .NET Core Conduct TCP Programming , And use this machine Ubuntu Script vs TCP The server communicates . before , I am here .NET The frame itself says ...

  2. Linux Build a RADIUS Server details

    As a network administrator , You need to store user information for each network device you need to manage . But network devices usually only support limited user management functions . Learn how to use Linux One of the exterior RADIUS Server to authenticate users , Specifically, through a ...

  3. use java Language to build a web server , Realize the communication between client and server , Implementation client has independent thread , Mutual interference

    The server : 1. The means of communication with the client are I/O stream 2. The way of docking is Socket Socket , Socket through IP Address and port number to establish the connection 3.( What used to affect understanding very much ) All the information of the output stream sent by the server will become the output stream of the client ...

  4. Use promise Build an asynchronous data request to the server

    function getJSON(Url){ return new Promise((resolve,reject)=>{ request= new XMLHttpRequest(); requ ...

  5. Android Learning notes - Build a reusable custom BaseAdapter

    Reprinted from http://www.runoob.com/w3cnote/android-tutorial-customer-baseadapter.html   author :coder-pig Introduction to this section : As the title , ...

  6. Python The father sends a message : Construct a PEG Parser

    Flower cat language : Python The father is in Medium I started a blog , Now I've written two articles , This is the translation of the second part . The translation of the previous one Here it is , Announced the use of PEG Parser to replace the current pgen Parser . This paper mainly introduces the construction of ...

  7. Build a basic front-end automation development environment —— be based on Gulp Front end integration solutions for ( Four )

    Through the preparatory work of the previous sections , about  npm / node / gulp We should have a basic understanding , This section mainly introduces how to build a basic front-end automation development environment . Next, we will build an automatic compiler step by step sass file . Compress ja ...

  8. .Net Medium AOP Build a car rental application

    return <.Net Medium AOP> General catalog of series learning This directory Start a new project No, AOP Life of Cost of change Use AOP restructure The source code of this series has been entrusted to Coding On : Click to see . Experimental environment of this series :VS ...

  9. .NET Core File system [5]: Extend the file system to build a simple version &ldquo; Cloud disk &rdquo;

    FileProvider Build an abstract file system , As its two concrete implementations ,PhysicalFileProvider and EmbeddedFileProvider Then we build a physical file system and an assembly embedded file for us respectively ...

  10. be based on Vue2.0+Vue-router Building a simple single page application

    Love programming, love sharing , Original article , Reprint please indicate the source , thank you !http://www.cnblogs.com/fozero/p/6185492.html One . Introduce vue.js yes at present The hottest front end frame ,vue.js ...

Random recommendation

  1. Android ---Toast Tool class , A little lazy

    package com.liunan.myfirstapp.util; import android.content.Context; import android.widget.Toast; /** ...

  2. caj turn pdf

    1, The preparation of the instruments Foxin reader CAJViewer 2: CAJViewer open caj file , Option printing , Choose Foxit reader printer , Start . 3: Just wait for the end Tips : It may take a little longer to print Do not operate in disorder

  3. win7 The network neighbor on the desktop is gone

    win7 The network neighbor on the desktop is gone , Maybe it was deleted on the desktop before . Now right click on the desktop -- Individualization -- Change the desktop icon , I can't find my online neighbors . How to find it back ? My Internet neighbor has been renamed network . You can right-click the desktop and select “ Individualization ”, And change the ...

  4. Nagios working principle

    The illustration Nagios How it works Nagios Active mode and passive mode Passive mode : As shown in the picture above , From the client nrpe process , Server through check_nrpe The plug-in sends commands to the client , The client calls the phase according to the instruction of the server ...

  5. python The realization of linked list of data structure

    #!/usr/bin/env python # --------------------------------------- # author : Geng Jie # email : gengji ...

  6. js Filter html label

    function deleteHtmlTag(str){ str = str.replace(/<[^>]+>|&[^>]+;/g,"").trim ...

  7. webpack Packing style code to duplicate

    One . Problem description Console review style , The same style is imported many times , Every call @import "common.less"; A similar style code will be added when packaging . Two . Problem analysis Fill up ... 3、 ... and . Resolver ...

  8. python Day 79 -- Week 14 homework

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Fiddler Can support Websocket Grab the bag.

    I tried it today ,Fiddler It has been able to support clients Websocket Grab the bag. , And the way to view it is very convenient . websocket As a standard application layer protocol , stay CS The end program is also better than the traditional one tcp The agreement is convenient , More common ...

  10. DIY Micro operating system (2)—— Register assignment

    The book has provided us with the simplest “hello world” Procedure I believe everyone has a good time , But this is just the rudiment of the boot sector And if you can't find the complete source code on the CD , It's hard for beginners to learn So I will try my best to post the code later ...