什么是 WebAssembly?由 GoogleMicrosoftMozillaApple 等发起的 WebAssembly 是一种新的字节码格式,主流浏览器都已经支持 WebAssembly。 和 JS 需要解释执行不同,WebAssembly 字节码和底层机器码很相似可快速装载运行,因此性能相对于 JS 解释执行大大提升。WebAssembly 并不是一门编程语言,而是一份字节码标准,需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行。

Panzr.io 简介

  • 基于开源技术的游戏
  • 使用 Web 作为发行平台
  • 轻巧快速
  • 探索基本的多人游戏技术
  • 扩展 Go 技术知识

Panzr.io 架构

Panzr.io 部署架构

Triebwerk 简介

项目源码:

项目 Status:

  • Triebwerk 是一个开源的多人游戏服务器
  • 使用 Go 语言编写
  • 目前仅是基础原型

游戏是如何运行的?

服务器权威架构

  • 仅通过服务器进行通讯
  • 客户端将所有输入发送到服务器
  • 服务器有权进行模拟
  • 防止作弊并引入延迟

客户端预测和服务器协调

  • 最早由 QuakeWorld 推广
  • 本地模拟运动
  • 不断与服务器状态同步
  • 根据服务器状态更正本地状态

客户端插值

  • 网络更新(Updates) < 每秒帧数(Frames)
  • 过去状态之间的插值
  • 保守算法
  • 没有推断

定义边界

限制:

  • 所有游戏逻辑仅在 2D 空间中
  • 均匀表面
  • 仅通过键盘进行输入控制
  • 限制地图尺寸
  • 缓慢移动的车辆
  • 没有物理引擎

服务器实现

玩家移动

碰撞检测

二进制数据传输

  • 最小化资源使用
  • 防止数据包分段
  • 最小化丢包的影响

WebAssembly 模块

游戏逻辑(Game logic)Server -> Client

  • 文件大小 > 2MB
  • 服务器和客户端根据相同的逻辑计算状态
  • 通过二进制类型进行数据传输

编译:

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))

在 Go 中编码 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)

在 Javascript 中解码 state

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

在线试玩

http://panzr.io

Refs

我是为少
微信:uuhells123
公众号:黑客下午茶
加我微信(互相学习交流),关注公众号(获取更多学习资料~)

探索使用 Golang 和 Webassembly 构建一个多人游戏服务器的更多相关文章

  1. 使用.net core在Ubuntu构建一个TCP服务器

    介绍和背景 TCP编程是网络编程领域最有趣的部分之一.在Ubuntu环境中,我喜欢使用.NET Core进行TCP编程,并使用本机Ubuntu脚本与TCP服务器进行通信.以前,我在.NET框架本身写了 ...

  2. Linux上构建一个RADIUS服务器详解

    作为一名网络管理员,您需要为您所需管理的每个网络设备存放用于管理的用户信息.但是网络设备通常只支持有限的用户管理功能.学习如何使用Linux上的一个外部RADIUS服务器来验证用户,具体来说是通过一个 ...

  3. 用java语言构建一个网络服务器,实现客户端和服务器之间通信,实现客户端拥有独立线程,互不干扰

    服务器: 1.与客户端的交流手段多是I/O流的方式 2.对接的方式是Socket套接字,套接字通过IP地址和端口号来建立连接 3.(曾经十分影响理解的点)服务器发出的输出流的所有信息都会成为客户端的输 ...

  4. 使用promise构建一个向服务器异步数据请求

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

  5. Android学习笔记-构建一个可复用的自定义BaseAdapter

    转载自http://www.runoob.com/w3cnote/android-tutorial-customer-baseadapter.html   作者:coder-pig 本节引言: 如题, ...

  6. Python 之父再发文:构建一个 PEG 解析器

    花下猫语: Python 之父在 Medium 上开了博客,现在写了两篇文章,本文是第二篇的译文.前一篇的译文 在此 ,宣布了将要用 PEG 解析器来替换当前的 pgen 解析器. 本文主要介绍了构建 ...

  7. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  8. .Net中的AOP系列之构建一个汽车租赁应用

    返回<.Net中的AOP>系列学习总目录 本篇目录 开始一个新项目 没有AOP的生活 变更的代价 使用AOP重构 本系列的源码本人已托管于Coding上:点击查看. 本系列的实验环境:VS ...

  9. .NET Core的文件系统[5]:扩展文件系统构建一个简易版&ldquo;云盘&rdquo;

    FileProvider构建了一个抽象文件系统,作为它的两个具体实现,PhysicalFileProvider和EmbeddedFileProvider则分别为我们构建了一个物理文件系统和程序集内嵌文 ...

  10. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...

随机推荐

  1. 安卓---Toast工具类,有点懒

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

  2. caj转pdf

    1,准备工具 福昕阅读器 CAJViewer 2: CAJViewer打开caj文件,选项打印,选择福昕阅读器打印机,开始. 3:等待结束即可 提示:打印时间可能会稍长 请勿乱操作

  3. win7 桌面上的网络邻居不见了

    win7 桌面上的网络邻居不见了,可能是以前在桌面上直接删除了.现右击桌面--个性化--更改桌面图标,也找不到网上邻居了.怎么找回来啊? 网上邻居已经改名叫网络了.可以右键桌面选择“个性化”,然后更改 ...

  4. Nagios工作原理

    图解Nagios的工作原理 Nagios的主动模式和被动模式 被动模式:就如同上图所显示的那样,客户端起nrpe进程,服务端通过check_nrpe插件向客户端发送命令,客户端根据服务端的指示来调用相 ...

  5. python之数据结构链表实现方式

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

  6. js过滤html标签

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

  7. webpack打包样式代码去重

    一.问题描述 控制台审查样式,同一个样式被导入很多遍,每调用一次@import "common.less";打包时都会多出一份类似的样式代码. 二.问题分析 补上... 三.解决方 ...

  8. python第七十九天--第十四周作业

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

  9. Fiddler可以支持Websocket抓包了

    今天试了一下,Fiddler已经可以支持客户端Websocket抓包了,并且查看的方式也非常方便. websocket作为一个标准的应用层的协议,在CS端程序用起来也比传统的tcp协议方便了,比较常见 ...

  10. DIY微型操作系统(2)—— 寄存器赋值

    书上已经为我们提供了最简单的“hello world”程序了 相信大家玩的也挺欢乐的,不过这只是引导扇区的雏形 而且如果找不到完整的光盘上的源代码,新手估计很难学的下去 所以之后文中也会尽量贴出代码 ...