Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >ColyseusJS 轻量级多人游戏服务器开发框架 - 中文手册(上)

ColyseusJS 轻量级多人游戏服务器开发框架 - 中文手册(上)

作者头像
为少
发布于 2021-05-27 10:56:05
发布于 2021-05-27 10:56:05
1.7K00
代码可运行
举报
文章被收录于专栏:黑客下午茶黑客下午茶
运行总次数:0
代码可运行

快速上手多人游戏服务器开发。后续会基于 Google Agones ,更新相关 K8S 运维、大规模快速扩展专用游戏服务器的文章。拥抱☁️原生? Cloud-Native!

快速开始

在开始之前,让我们确保在您的本地机器上安装了必要的系统需求。

系统必需:

  • Download and install Node.js v12.0 或更高版本。
    • https://nodejs.org/
  • Download and install Git SCM
    • https://git-scm.com/downloads
  • Download and install Visual Studio Code (或者你选择的其他编辑器)
    • https://code.visualstudio.com/

创建一个 barebones(裸) Colyseus server

使用 npm init colyseus-app 命令生成 barebones(裸) Colyseus server。您可以选择 TypeScript(推荐),JavaScriptHaxe 作为服务器的选择语言。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm init colyseus-app ./my-colyseus-app

从官方的例子来看

或者,您可以通过克隆示例项目并在本地运行它来查看一些实际示例。

  • 示例项目: https://github.com/colyseus/colyseus-examples
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
git clone https://github.com/colyseus/colyseus-examples.git
cd colyseus-examples
npm install

要在本地运行服务器,请运行 npm start,然后打开 http://localhost:2567 查看每个示例。

Colyseus 工作原理概述

Presentation: Overview of how Colyseus works

  • https://docs.google.com/presentation/d/e/2PACX-1vSjJtmU-SIkng_bFQ5z1000M6nPSoAoQL54j0Y_Cbg7R5tRe9FXLKaBmcKbY_iyEpnMqQGDjx_335QJ/embed?start=false&loop=false&delayms=3000

JavaScript/TypeScript SDK

JavaScript/TypeScript SDK 与大多数平台兼容:

  • 浏览器 (Google Chrome, Firefox, Safari, Opera, Brave, etc.)
  • Node.js
    • https://nodejs.org/
  • Electron
    • https://github.com/electron/electron
  • React Native
    • https://github.com/facebook/react-native
  • Cocos Creator 3.0 (请参阅说明)
    • http://www.cocos2d-x.org/creator

用法

在项目中包括 JavaScript SDK

如果你正在使用一个构建工具(webpackrollup或类似的),这是首选的方法。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install --save colyseus.js

如果你不使用构建工具,建议从 GitHub Releases 下载。

https://github.com/colyseus/colyseus.js/releases

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="colyseus.js"></script>

或者,您可以使用 unpkg 直接包括分发文件。确保用与您的服务器兼容的版本来替换其中的 @x.x.x 部分。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://unpkg.com/colyseus.js@^0.14.0/dist/colyseus.js"></script>

连接到服务器:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import * as Colyseus from "colyseus.js"; // 如果通过 <script> 标记包含,则不需要。

var client = new Colyseus.Client('ws://localhost:2567');

加入一个 room(房间):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
client.joinOrCreate("room_name").then(room => {
    console.log(room.sessionId, "joined", room.name);
}).catch(e => {
    console.log("JOIN ERROR", e);
});

Room 事件

Room state(状态) 已经被更新:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
room.onStateChange((state) => {
  console.log(room.name, "has new state:", state);
});

从服务器广播或直接广播到此客户端的消息:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
room.onMessage("message_type", (message) => {
  console.log(client.id, "received on", room.name, message);
});

发生服务器错误:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
room.onError((code, message) => {
  console.log(client.id, "couldn't join", room.name);
});

client 离开 room

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
room.onLeave((code) => {
  console.log(client.id, "left", room.name);
});

Cocos Creator 3.0

  • 从 GitHub 下载最新的 colyseus-js-client.zip 版本。
    • https://github.com/colyseus/colyseus.js/releases
  • 解压 colyseus-js-client.zip 文件。
  • colyseus.jscolyseus.d.ts 文件移到 Cocos Creator 项目的 scripts 文件夹中。
  • 单击 Assets 面板中的 colyseus.js 文件,并启用 "Import As Plugin"(见下图)
  • TypeScript: 需要使用 import Colyseus from "./colyseus.js";
  • JavaScript: 需要使用 const Colyseus = require("./colyseus.js");

概述

Colyseus 目前有客户端 SDK,可用于以下平台:

  • Unity (source-code)
    • https://github.com/colyseus/colyseus-unity3d
  • JavaScript/TypeScript (source-code)
    • https://github.com/colyseus/colyseus.js
  • Defold Engine (source-code)
    • https://github.com/colyseus/colyseus-defold
  • Haxe (source-code)
    • https://github.com/colyseus/colyseus-hx
  • Cocos2d-X (source-code)
    • https://github.com/colyseus/colyseus-cocos2d-x
  • Construct3 (source-code)
    • https://github.com/colyseus/colyseus-construct3

需要另一个平台的客户端?在discussion board分享你的兴趣吧!

  • https://discuss.colyseus.io/

实例化 Colyseus 客户端

Client 实例用于执行配对调用,然后连接到一个或多个房间。

此时没有实际的服务器端连接。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import Colyseus from "colyseus.js";
// ...

let client = new Colyseus.Client("ws://localhost:2567");

方法

joinOrCreate (roomName: string, options: any)

通过提供的 roomNameoptions 加入现有房间或创建新房间。

此方法将忽略锁定的房间或私人房间。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
try {
  const room = await client.joinOrCreate("battle", {/* options */});
  console.log("joined successfully", room);

} catch (e) {
  console.error("join error", e);
}

create (roomName: string, options: any)

通过提供的 roomNameoptions 创建新房间。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
try {
  const room = await client.create("battle", {/* options */});
  console.log("joined successfully", room);

} catch (e) {
  console.error("join error", e);
}

join (roomName: string, options: any)

通过提供的 roomNameoptions 连接一个现有的房间。

此方法将忽略锁定的房间或私人房间。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
try {
  const room = await client.join("battle", {/* options */});
  console.log("joined successfully", room);

} catch (e) {
  console.error("join error", e);
}

joinById (roomId: string, options: any)

通过 roomId 加入现有房间。私人房间可以通过 id 连接。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
try {
  const room = await client.joinById("KRYAKzRo2", {/* options */});
  console.log("joined successfully", room);

} catch (e) {
  console.error("join error", e);
}

使用 getAvailableRooms() 检索可加入的 roomId 列表。

reconnect (roomId: string, sessionId: string)

将客户端重新连接到他以前连接的房间。

必须与服务器端的 allowReconnection() 一起使用。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
try {
  const room = await client.reconnect("wNHTX5qik", "SkNaHTazQ");
  console.log("joined successfully", room);

} catch (e) {
  console.error("join error", e);
}

getAvailableRooms (roomName?: string)

列出要连接的所有可用房间。锁好的房间和私人房间不会被列出。roomName 是可选的。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
client.getAvailableRooms("battle").then(rooms => {
  rooms.forEach((room) => {
    console.log(room.roomId);
    console.log(room.clients);
    console.log(room.maxClients);
    console.log(room.metadata);
  });
}).catch(e => {
  console.error(e);
});

consumeSeatReservation (reservation)

通过预订座位加入一个房间。

"高级用法":请参阅Match-maker API以了解如何检索座位预订数据。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
try {
  const room = await client.consumeSeatReservation(reservation);
  console.log("joined successfully", room);

} catch (e) {
  console.error("join error", e);
}

Room API (Client-side)

属性

state: any

当前房间的状态。此变量始终与服务器端的最新 state 同步。要侦听整个状态的更新,请参阅 onStateChange 事件。

您可以将 callbacks 附加到您 state 中的特定结构。参阅 schema callbacks。

sessionId: string

当前连接的客户端的唯一标识符。此属性与服务器端的 client.sessionId 匹配。

id: string

房间的唯一标识。您可以与其他客户端共享此 id,以便允许他们直接连接到此房间。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// get `roomId` from the query string
let roomId = location.href.match(/roomId=([a-zA-Z0-9\-_]+)/)[1];

// joining a room by its id
client.joinById(roomId).then(room => {
  // ...
});

name: string

room handler 的名称。例如:"battle"

方法

send (type, message)

room handler 发送一种类型的消息。消息是用 MsgPack 编码的,可以保存任何 JSON-seriazeable(JSON可序列化)的数据结构

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//
// sending message with string type
//
room.send("move", { direction: "left"});

//
// sending message with number type
//
room.send(0, { direction: "left"});

从服务器端使用 Room#onMessage() 读取消息。

leave ()

与房间断开连接。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
room.leave();

使用 Room#onLeave() 处理与服务器端的断开连接。

removeAllListeners()

移除 onMessageonStateChangeonLeaveonError 监听器。

如果您使用的是 Fossil Delta 序列化程序,还将删除所有 .listen() 调用。。

事件

onStateChange

查看 State Handling » Schema » Client-side 部分了解更多详细信息。

此事件在服务器更新其状态时触发。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
room.onStateChange.once((state) => {
  console.log("this is the first room state!", state);
});

room.onStateChange((state) => {
  console.log("the room state has been updated:", state);
});

onMessage

当服务器直接向客户端或通过广播发送消息时,会触发此事件。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
room.onMessage("powerup", (message) => {
  console.log("message received from server");
  console.log(message);
});

要将消息从服务器直接发送到客户端,您需要使用 client.send() 或room.broadcast()

onLeave

当客户端离开房间时触发此事件。

可能出现的 code

  • 1000: 正常 Socket Shutdown
  • 高于 1000: 异常 Socket Shutdown (更多详细信息)
    • https://github.com/Luka967/websocket-close-codes#websocket-close-codes
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
room.onLeave((code) => {
  console.log("client left the room");
});

onError

room handler 中发生某些错误时,将触发此事件。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
room.onError((code, message) => {
  console.log("oops, error ocurred:");
  console.log(message);
});

Refs

中文手册同步更新在:

  • https:/colyseus.hacker-linner.com
代码语言:javascript
代码运行次数:0
运行
复制
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-05-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 黑客下午茶 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ColyseusJS 轻量级多人游戏服务器开发框架 - 中文手册(中)
快速上手多人游戏服务器开发。后续会基于 Google Agones,更新相关 K8S 运维、大规模快速扩展专用游戏服务器的文章。拥抱☁️原生? Cloud-Native! 系列 ColyseusJS
为少
2021/05/27
2K0
ColyseusJS 轻量级多人游戏服务器开发框架 - 中文手册(下)
快速上手多人游戏服务器开发。后续会基于 Google Agones,更新相关 K8S 运维、大规模快速扩展专用游戏服务器的文章。拥抱☁️原生? Cloud-Native! 系列 ColyseusJS
为少
2021/05/27
2.7K0
ColyseusJS 轻量级多人游戏服务器开发框架 - 中文手册(系统保障篇)
快速上手多人游戏服务器开发。后续会基于 Google Agones,更新相关 K8S 运维、大规模快速扩展专用游戏服务器的文章。拥抱☁️原生? Cloud-Native! 系列 ColyseusJS
为少
2021/05/27
8.1K0
ColyseusJS 轻量级多人游戏服务器开发框架 - 中文手册(系统保障篇)
Colyseus:轻量级多人游戏免费开源解决方案
这个框架也是最近接触,自己在摸索过程中遇到很多坑,因此记录下。文章基于 Express + TS 演示及说明。
青年码农
2023/03/01
2.3K1
Colyseus:轻量级多人游戏免费开源解决方案
TRTC学习之旅(二)-- 使用vue+ts集成TRTC实现多人会议室
根据上回学习了官方TRTC demo之后,已经了解了一个基础的多人会议室创建的流程,接下来我需要将自己学到的转换为自己能够运用的。
黑眼圈云豆
2020/06/24
4K3
TRTC学习之旅(二)--  使用vue+ts集成TRTC实现多人会议室
探索 Golang 云原生游戏服务器开发,5 分钟上手 Nano 游戏服务器框架
nano 是一个轻量级的服务器框架,它最适合的应用领域是网页游戏、社交游戏、移动游戏的服务端。当然还不仅仅是游戏,用 nano 开发高实时 web 应用也非常合适。
为少
2021/05/27
7.7K0
探索 Golang 云原生游戏服务器开发,5 分钟上手 Nano 游戏服务器框架
在Ubuntu上部署一个基于webrtc的多人视频聊天服务
最近研究webrtc视频直播技术,网上找了些教程最终都不太能顺利跑起来的,可能是文章写的比较老,使用的一些开源组件已经更新了,有些配置已经不太一样了,所以按照以前的步骤会有问题。折腾了一阵终于跑起来了,记录一下。
MJ.Zhou
2020/03/19
1.2K0
TRTC学习之旅(一)--多人聊天室web篇(官方demo)
大家好,我是刚入坑TRTC的小菜鸡,黑圆圈云豆。因为我的主要技术方向是web,所以我就从基于web开发的TRTC demo进行学习和知识分享。
黑眼圈云豆
2020/06/19
4.7K0
TRTC学习之旅(一)--多人聊天室web篇(官方demo)
webrtc笔记(5): 基于kurento media server的多人视频聊天示例
这是kurento tutorial中的一个例子(groupCall),用于多人音视频通话,效果如下:
菩提树下的杨过
2019/07/15
2.2K0
webrtc笔记(5): 基于kurento media server的多人视频聊天示例
TRTC学习之旅(三)-- 使用vue+ts集成互动直播
上次我们已经用vue+ts实现了多人会议室的搭建,这次我们继续在上次项目的基础上,实现互动直播功能。
黑眼圈云豆
2020/07/01
2.1K2
TRTC学习之旅(三)-- 使用vue+ts集成互动直播
Nodejs+socket.io搭建WebRTC信令服务器
我们在学习 WebRTC 时,首先要把实验环境搭建好,这样我们就可以在上面做各种实验了。
音视频_李超
2020/04/01
8.4K2
Nodejs+socket.io搭建WebRTC信令服务器
小程序使用 移动直播SDK
在使用腾讯的 trtc 产品时,要是想在微信小程序实现直播的业务能力,首先需要指定 ‘主播’ 和 ‘观众’ 角色,小程序的 <trtc-room> 中的标签属性和实例对象的方法都没有做直播状态时的角色区分;再就是想在主播端和观众端实现一些弹幕,点赞,连麦互动时需要使用到 custom 自定义面板,需要对页面进行设计,我也有对 custom 面板的简单使用写了两篇文章可供参考:微信小程序TRTC使用custom自定义面板(理解篇)、微信小程序TRTC使用custom自定义面板(实现篇)。为了方便开发者,腾讯云还有 移动直播SDK,其中集成了弹幕、点赞、美颜、连麦等一些功能的,微信小程序端的调用方式也是以组件形势进行调用。
yuliang
2021/03/21
8.4K0
【从头到脚】前端实现多人视频聊天— WebRTC 实战(多人篇)
这是 WebRTC 系列的第三篇文章,主要讲多人点对点连接。如果你对 WebRTC 还不太了解,推荐阅读我之前的文章。
陈大鱼头
2020/04/16
5.9K0
【从头到脚】前端实现多人视频聊天— WebRTC 实战(多人篇)
2万字长文肝了一个实时聊天室,只为让她学会websocket
看演示不过瘾,我也玩一下(http://socket.vjscoder.com/websocket-chatroom/index.html#/)
前端胖头鱼
2022/07/25
9740
2万字长文肝了一个实时聊天室,只为让她学会websocket
云终端系列(一)—— 实时音视频Web端接入体验(Vue基础音视频通话篇)
这个系列呢,主要给各位观众老爷看看目前有较大趋势的SaaS应用的SDK在各种主流Web终端的使用姿势和异常分析,如果想要纯粹了解开发的或者云原生,云开发的可以去往另一个系列——云开发系列。
楚歌
2020/11/23
4.3K1
通过WebRTC进行实时通信-建立信令服务交换数据
换句话说,交换metadata需要在点对点传输音频、视频或数据之前。这个过程称之为信令。
音视频_李超
2020/04/02
2.3K0
通过WebRTC进行实时通信-建立信令服务交换数据
基于node+socket.io+redis的多房间多进程聊天室
本文作者:IMWeb jaychen 原文出处:IMWeb社区 未经同意,禁止转载 一、相关技术介绍: 消息实时推送,指的是将消息实时地推送到浏览器,用户不需要刷新浏览器就可以实时获取最新的消息
IMWeb前端团队
2018/01/08
3.1K0
基于node+socket.io+redis的多房间多进程聊天室
TRTC零基础入门之Web篇(一)
在建立这个在线课堂应用过程中,可能会使用到腾讯云的IM、云直播等服务,以及对应安卓端SDK,下面将通过三篇文章来记录这个过程,本文为第一篇。
天上云间
2020/12/20
4.2K2
TRTC零基础入门之Web篇(一)
蜗牛(tete)语音软件系统开发全市场源码搭建平台(案例)
以下是一个关于语音厅APP开发的基本步骤: 需求分析:明确系统需要实现的功能,如设备监控、能耗管理、环境监测、安全预警等。 系统设计: 架构设计,包括前端APP界面、后端服务器及与物联网设备的通信协议。
l8l259l3365
2024/12/05
2600
蜗牛(tete)语音软件系统开发全市场源码搭建平台(案例)
纯前端如何利用帧同步做一款联机游戏?
·现代多人游戏中,多个客户端之间的通讯大多以同步多方状态为主要目标,为了实现这一目标,主要有两个技术方向:状态同步、帧同步。
腾讯游戏云
2020/11/13
2.7K0
推荐阅读
相关推荐
ColyseusJS 轻量级多人游戏服务器开发框架 - 中文手册(中)
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验