Tic-tac-toe Web on POSIX Sockets and WebRTC

Tags

Overview

We deploy a game that works on the Web and on the Internet in order to learn Posix Sockets using C++ language.

Demo

WebSockets Demo: https://tictactoe.sanchezcarlosjr.com

WebRTC Demo: https://tic-tac-toe.sanchezcarlosjr.com/

Code & Releases

sanchezcarlosjr. (2022, October 02). operating-systems. Retrieved from https://github.com/sanchezcarlosjr/operating-systems/tree/main/tic_tac_toe_http_ipv4_sockets

Keywords

Posix Sockets, Web, Tic Tac Toe, WebSockets, Web

Introduction

Background

Send HTML through socket in c++. (2022, October 02). Retrieved from https://stackoverflow.com/questions/61936165/send-html-through-socket-in-c

Goals

Follow Tic Tac Toe rules.

Make an interface Console-based.

Deploy on the Internet P2P Tunneling-based.

Make an interface HTML-based.

Deploy on Cloudflare Tunneling using my domain.

Decentralized version.

Domain understanding

Design view

classDiagram
class Game
class ConsoleBoard
class Player
class LocalConsolePlayer

Logic view

stateDiagram-v2
    [*] --> Initializing
    Initializing --> WaitingPlayerWithTurn0
    WaitingPlayerWithTurn0 --> MovingPlayerWithTurn0
    MovingPlayerWithTurn0 --> WaitingPlayerWithTurn1
    WaitingPlayerWithTurn1 --> MovingPlayerWithTurn1
    MovingPlayerWithTurn1 --> WaitingPlayerWithTurn0: reset
    MovingPlayerWithTurn0 --> GameOver
    MovingPlayerWithTurn1 --> GameOver
    GameOver --> Initializing

Sequence

sequenceDiagram
    Active->>Active: Moving 
    Pasive->>Pasive: Waiting
    Active->>Pasive: Moving "row column"
    Active->>Active: Waiting

Matchmaking

stateDiagram-v2
    [*] --> AssignGameUUID
    AssignGameUUID --> ShareUUID
    ShareUUID --> ConnectToGame

Design

We follow the same states as

Making a Chat TCP IPv4 POSIX socket

but we’ll change the message kind.

Layouts

Version Console

Version Web

https://tictactoe.sanchezcarlosjr.com/

We’ll develop with Nodejs Websockets and reuse C++ program with Queue Messaging.

HTTP/1.1 200 OK
Content-Type:text/html
Content-Length: ...

<!DOCTYPE html>...

However, we do not use the terminal, our user interface is the browser instead.

Websockets

Since we might reuse code and same time programming over Node, our app has to use Queue Messaging between C++ and node. Our standard message format is JSON.

sequenceDiagram
    Users ->> Node: websocket connection
    Node->>Tic Tac Toe Process: start game, make new queue and fork process
    Tic Tac Toe Process->>Node: start node 
    Tic Tac Toe Process-->Users: queue message communication following Tic Tac Toe rules

Tunneling web server

cloudflared tunnel --no-autoupdate --config ~/.cloudflared/uid.yml run

Now, Cloudflare provides you with a URL on your domain, open it on your favorite browser.

Decentralization

We implement Tic Tac Toe over the Web RTC, so we don’t a server between browsers, but a signal server. We use WebAssembly to import previous domain logic and Peer.js to communicate peers.

https://github.com/sanchezcarlosjr/tic-tac-toe

https://tic-tac-toe.sanchezcarlosjr.com