Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1698 from thecodingmachine/ts-proto

Browse source 
Migrating front protobuf encode/decode to ts-proto lib
This commit is contained in:
David Négrier 2022-01-03 18:07:19 +01:00 • committed by GitHub
commit fb69476b97
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 847 additions and 644 deletions
Download patch file Download diff file Expand all files Collapse all files

6
front/src/Connexion/AdminMessagesService.ts
View file

@ -1,5 +1,5 @@
import { Subject } from "rxjs";
import type { BanUserMessage, SendUserMessage } from "../Messages/generated/messages_pb";
import type { BanUserMessage, SendUserMessage } from "../Messages/ts-proto-generated/messages";
export enum AdminMessageEventTypes {
admin = "message",
@ -26,8 +26,8 @@ class AdminMessagesService {
onSendusermessage(message: SendUserMessage | BanUserMessage) {
this._messageStream.next({
type: message.getType() as unknown as AdminMessageEventTypes,
text: message.getMessage(),
type: message.type as unknown as AdminMessageEventTypes,
text: message.message,
});
}
}

4
front/src/Connexion/ConnectionManager.ts
View file

@ -280,7 +280,7 @@ class ConnectionManager {
reject(error);
});
connection.onConnectingError((event: CloseEvent) => {
connection.connectionErrorStream.subscribe((event: CloseEvent) => {
console.log("An error occurred while connecting to socket server. Retrying");
reject(
new Error(
@ -292,7 +292,7 @@ class ConnectionManager {
);
});
connection.onConnect((connect: OnConnectInterface) => {
connection.roomJoinedMessageStream.subscribe((connect: OnConnectInterface) => {
resolve(connect);
});
}).catch((err) => {

36
front/src/Connexion/ConnexionModels.ts
View file

@ -1,44 +1,12 @@
import type { SignalData } from "simple-peer";
import type { RoomConnection } from "./RoomConnection";
import type { BodyResourceDescriptionInterface } from "../Phaser/Entity/PlayerTextures";
export enum EventMessage {
CONNECT = "connect",
WEBRTC_SIGNAL = "webrtc-signal",
WEBRTC_SCREEN_SHARING_SIGNAL = "webrtc-screen-sharing-signal",
WEBRTC_START = "webrtc-start",
//START_ROOM = "start-room", // From server to client: list of all room users/groups/items
JOIN_ROOM = "join-room", // bi-directional
USER_POSITION = "user-position", // From client to server
USER_MOVED = "user-moved", // From server to client
USER_LEFT = "user-left", // From server to client
MESSAGE_ERROR = "message-error",
WEBRTC_DISCONNECT = "webrtc-disconect",
GROUP_CREATE_UPDATE = "group-create-update",
GROUP_DELETE = "group-delete",
SET_PLAYER_DETAILS = "set-player-details", // Send the name and character to the server (on connect), receive back the id.
ITEM_EVENT = "item-event",
USER_DETAILS_UPDATED = "user-details-updated",
CONNECT_ERROR = "connect_error",
CONNECTING_ERROR = "connecting_error",
SET_SILENT = "set_silent", // Set or unset the silent mode for this user.
SET_VIEWPORT = "set-viewport",
BATCH = "batch",
PLAY_GLOBAL_MESSAGE = "play-global-message",
STOP_GLOBAL_MESSAGE = "stop-global-message",
TELEPORT = "teleport",
USER_MESSAGE = "user-message",
START_JITSI_ROOM = "start-jitsi-room",
SET_VARIABLE = "set-variable",
}
import { PositionMessage_Direction } from "../Messages/ts-proto-generated/messages";
export interface PointInterface {
x: number;
y: number;
direction: string;
direction: string; // TODO: modify this to the enum from ts-proto
moving: boolean;
}

17
front/src/Connexion/EmoteEventStream.ts
View file

@ -1,17 +0,0 @@
import { Subject } from "rxjs";
interface EmoteEvent {
userId: number;
emote: string;
}
class EmoteEventStream {
private _stream: Subject<EmoteEvent> = new Subject();
public stream = this._stream.asObservable();
fire(userId: number, emote: string) {
this._stream.next({ userId, emote });
}
}
export const emoteEventStream = new EmoteEventStream();

1050
front/src/Connexion/RoomConnection.ts
View file

File diff suppressed because it is too large Load diff

12
front/src/Connexion/WorldFullMessageStream.ts
View file

@ -1,12 +0,0 @@
import { Subject } from "rxjs";
class WorldFullMessageStream {
private _stream: Subject<string | null> = new Subject<string | null>();
public stream = this._stream.asObservable();
onMessage(message?: string) {
this._stream.next(message);
}
}
export const worldFullMessageStream = new WorldFullMessageStream();

1
front/src/Messages/.gitignore vendored
View file

@ -1 +0,0 @@
/generated/

1
front/src/Messages/ts-proto-generated/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
*

20
front/src/Network/ProtobufClientUtils.ts
View file

@ -1,21 +1,21 @@
import { PositionMessage } from "../Messages/generated/messages_pb";
import Direction = PositionMessage.Direction;
import { PositionMessage, PositionMessage_Direction } from "../Messages/ts-proto-generated/messages";
import type { PointInterface } from "../Connexion/ConnexionModels";
export class ProtobufClientUtils {
public static toPointInterface(position: PositionMessage): PointInterface {
let direction: string;
switch (position.getDirection()) {
case Direction.UP:
switch (position.direction) {
case PositionMessage_Direction.UP:
direction = "up";
break;
case Direction.DOWN:
case PositionMessage_Direction.DOWN:
direction = "down";
break;
case Direction.LEFT:
case PositionMessage_Direction.LEFT:
direction = "left";
break;
case Direction.RIGHT:
case PositionMessage_Direction.RIGHT:
direction = "right";
break;
default:
@ -24,10 +24,10 @@ export class ProtobufClientUtils {
// sending to all clients in room except sender
return {
x: position.getX(),
y: position.getY(),
x: position.x,
y: position.y,
direction,
moving: position.getMoving(),
moving: position.moving,
};
}
}

8
front/src/Phaser/Game/EmoteManager.ts
View file

@ -1,13 +1,13 @@
import { emoteEventStream } from "../../Connexion/EmoteEventStream";
import type { GameScene } from "./GameScene";
import type { Subscription } from "rxjs";
import type { RoomConnection } from "../../Connexion/RoomConnection";
export class EmoteManager {
private subscription: Subscription;
constructor(private scene: GameScene) {
this.subscription = emoteEventStream.stream.subscribe((event) => {
const actor = this.scene.MapPlayersByKey.get(event.userId);
constructor(private scene: GameScene, private connection: RoomConnection) {
this.subscription = connection.emoteEventMessageStream.subscribe((event) => {
const actor = this.scene.MapPlayersByKey.get(event.actorUserId);
if (actor) {
actor.playEmote(event.emote);
}

56
front/src/Phaser/Game/GameScene.ts
View file

@ -40,7 +40,6 @@ import { ReconnectingSceneName } from "../Reconnecting/ReconnectingScene";
import { GameMap } from "./GameMap";
import { PlayerMovement } from "./PlayerMovement";
import { PlayersPositionInterpolator } from "./PlayersPositionInterpolator";
import { worldFullMessageStream } from "../../Connexion/WorldFullMessageStream";
import { DirtyScene } from "./DirtyScene";
import { TextUtils } from "../Components/TextUtils";
import { joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey } from "../Components/MobileJoystick";
@ -60,7 +59,6 @@ import type {
PositionInterface,
RoomJoinedMessageInterface,
} from "../../Connexion/ConnexionModels";
import type { UserMovedMessage } from "../../Messages/generated/messages_pb";
import type { RoomConnection } from "../../Connexion/RoomConnection";
import type { ActionableItem } from "../Items/ActionableItem";
import type { ItemFactoryInterface } from "../Items/ItemFactoryInterface";
@ -90,7 +88,6 @@ import SpriteSheetFile = Phaser.Loader.FileTypes.SpriteSheetFile;
import { deepCopy } from "deep-copy-ts";
import FILE_LOAD_ERROR = Phaser.Loader.Events.FILE_LOAD_ERROR;
import { MapStore } from "../../Stores/Utils/MapStore";
import { SetPlayerDetailsMessage } from "../../Messages/generated/messages_pb";
import { followUsersColorStore, followUsersStore } from "../../Stores/FollowStore";
import { getColorRgbFromHue } from "../../WebRtc/ColorGenerator";
import Camera = Phaser.Cameras.Scene2D.Camera;
@ -452,10 +449,6 @@ export class GameScene extends DirtyScene {
this.pinchManager = new PinchManager(this);
}
this.messageSubscription = worldFullMessageStream.stream.subscribe((message) =>
this.showWorldFullError(message)
);
const playerName = gameManager.getPlayerName();
if (!playerName) {
throw "playerName is not set";
@ -623,8 +616,6 @@ export class GameScene extends DirtyScene {
this.connect();
}
this.emoteManager = new EmoteManager(this);
let oldPeerNumber = 0;
this.peerStoreUnsubscribe = peerStore.subscribe((peers) => {
const newPeerNumber = peers.size;
@ -699,7 +690,7 @@ export class GameScene extends DirtyScene {
playersStore.connectToRoomConnection(this.connection);
userIsAdminStore.set(this.connection.hasTag("admin"));
this.connection.onUserJoins((message: MessageUserJoined) => {
this.connection.userJoinedMessageStream.subscribe((message) => {
const userMessage: AddPlayerInterface = {
userId: message.userId,
characterLayers: message.characterLayers,
@ -713,31 +704,33 @@ export class GameScene extends DirtyScene {
this.addPlayer(userMessage);
});
this.connection.onUserMoved((message: UserMovedMessage) => {
const position = message.getPosition();
this.connection.userMovedMessageStream.subscribe((message) => {
const position = message.position;
if (position === undefined) {
throw new Error("Position missing from UserMovedMessage");
}
const messageUserMoved: MessageUserMovedInterface = {
userId: message.getUserid(),
userId: message.userId,
position: ProtobufClientUtils.toPointInterface(position),
};
this.updatePlayerPosition(messageUserMoved);
});
this.connection.onUserLeft((userId: number) => {
this.removePlayer(userId);
this.connection.userLeftMessageStream.subscribe((message) => {
this.removePlayer(message.userId);
});
this.connection.onGroupUpdatedOrCreated((groupPositionMessage: GroupCreatedUpdatedMessageInterface) => {
this.shareGroupPosition(groupPositionMessage);
});
this.connection.groupUpdateMessageStream.subscribe(
(groupPositionMessage: GroupCreatedUpdatedMessageInterface) => {
this.shareGroupPosition(groupPositionMessage);
}
);
this.connection.onGroupDeleted((groupId: number) => {
this.connection.groupDeleteMessageStream.subscribe((message) => {
try {
this.deleteGroup(groupId);
this.deleteGroup(message.groupId);
} catch (e) {
console.error(e);
}
@ -749,7 +742,7 @@ export class GameScene extends DirtyScene {
this.createSuccessorGameScene(true, true);
});
this.connection.onActionableEvent((message) => {
this.connection.itemEventMessageStream.subscribe((message) => {
const item = this.actionableItems.get(message.itemId);
if (item === undefined) {
console.warn(
@ -762,18 +755,29 @@ export class GameScene extends DirtyScene {
item.fire(message.event, message.state, message.parameters);
});
this.connection.onPlayerDetailsUpdated((message) => {
this.connection.playerDetailsUpdatedMessageStream.subscribe((message) => {
if (message.details === undefined) {
throw new Error("Malformed message. Missing details in PlayerDetailsUpdatedMessage");
}
this.pendingEvents.enqueue({
type: "PlayerDetailsUpdated",
details: message,
details: {
userId: message.userId,
outlineColor: message.details.outlineColor,
removeOutlineColor: message.details.removeOutlineColor,
},
});
});
/**
* Triggered when we receive the JWT token to connect to Jitsi
*/
this.connection.onStartJitsiRoom((jwt, room) => {
this.startJitsi(room, jwt);
this.connection.sendJitsiJwtMessageStream.subscribe((message) => {
this.startJitsi(message.jitsiRoom, message.jwt);
});
this.messageSubscription = this.connection.worldFullMessageStream.subscribe((message) => {
this.showWorldFullError(message);
});
// When connection is performed, let's connect SimplePeer
@ -848,6 +852,8 @@ export class GameScene extends DirtyScene {
});
});
this.emoteManager = new EmoteManager(this, this.connection);
// this.gameMap.onLeaveLayer((layers) => {
// layers.forEach((layer) => {
// iframeListener.sendLeaveLayerEvent(layer.name);

2
front/src/Phaser/Game/SharedVariablesManager.ts
View file

@ -42,7 +42,7 @@ export class SharedVariablesManager {
this._variables.set(name, value);
}
roomConnection.onSetVariable((name, value) => {
roomConnection.variableMessageStream.subscribe(({ name, value }) => {
this._variables.set(name, value);
// On server change, let's notify the iframes

8
front/src/Stores/PlayersStore.ts
View file

@ -3,6 +3,7 @@ import type { PlayerInterface } from "../Phaser/Game/PlayerInterface";
import type { RoomConnection } from "../Connexion/RoomConnection";
import { getRandomColor } from "../WebRtc/ColorGenerator";
import { localUserStore } from "../Connexion/LocalUserStore";
import room from "../Api/iframe/room";
let idCount = 0;
@ -19,7 +20,8 @@ function createPlayersStore() {
connectToRoomConnection: (roomConnection: RoomConnection) => {
players = new Map<number, PlayerInterface>();
set(players);
roomConnection.onUserJoins((message) => {
// TODO: it would be cool to unsubscribe properly here
roomConnection.userJoinedMessageStream.subscribe((message) => {
update((users) => {
users.set(message.userId, {
userId: message.userId,
@ -33,9 +35,9 @@ function createPlayersStore() {
return users;
});
});
roomConnection.onUserLeft((userId) => {
roomConnection.userLeftMessageStream.subscribe((message) => {
update((users) => {
users.delete(userId);
users.delete(message.userId);
return users;
});
});

14
front/src/WebRtc/SimplePeer.ts
View file

@ -75,23 +75,25 @@ export class SimplePeer {
*/
private initialise() {
//receive signal by gemer
this.Connection.receiveWebrtcSignal((message: WebRtcSignalReceivedMessageInterface) => {
this.Connection.webRtcSignalToClientMessageStream.subscribe((message: WebRtcSignalReceivedMessageInterface) => {
this.receiveWebrtcSignal(message);
});
//receive signal by gemer
this.Connection.receiveWebrtcScreenSharingSignal((message: WebRtcSignalReceivedMessageInterface) => {
this.receiveWebrtcScreenSharingSignal(message);
});
this.Connection.webRtcScreenSharingSignalToClientMessageStream.subscribe(
(message: WebRtcSignalReceivedMessageInterface) => {
this.receiveWebrtcScreenSharingSignal(message);
}
);
mediaManager.showGameOverlay();
//receive message start
this.Connection.receiveWebrtcStart((message: UserSimplePeerInterface) => {
this.Connection.webRtcStartMessageStream.subscribe((message: UserSimplePeerInterface) => {
this.receiveWebrtcStart(message);
});
this.Connection.disconnectMessage((data: WebRtcDisconnectMessageInterface): void => {
this.Connection.webRtcDisconnectMessageStream.subscribe((data: WebRtcDisconnectMessageInterface): void => {
this.closeConnection(data.userId);
});
}