Building a Real Time iOS multiplayer game with Swift and WebSockets (1)

Introduction

In this tutorial, I am going to explain how one could create a multiplayer real time game using Swift and WebSockets. Swift will be used both on the client and the server. This is a four-part tutorial. The tutorial consists of the following parts:

• Introduction and workspace setup.
• Setup shared library project.
• Setup server project.
• Setup iPhone client

So what are WebSockets? Well, according to Mozilla:

WebSockets are an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

Of course, we will not communicate from a browser, but use a native client instead.

For this example, we'll create a Tic Tac Toe game. To keep the server code simple, the server will only support a single game for two players at any time.

Code for the full project can be downloaded from my GitHub.

Tools of the trade

We will use the following tools and libraries for this project:

• Starscream: for websockets support on the client.
• Perfect: a webserver and toolkit that is written in Swift and supports websockets.

It would have been awesome to use Perfect on the client as well, but as of yet, this is not (easily) possible. The Perfect library relies on the Swift Package Manager to be able to include it into your own projects, but for now, the Swift Package Manager is not supported for iOS. Luckily, Starscream supports Cocoapods, which is what we'll be using for the iOS app.

Workspace setup

For this game, we'll create a single workspace that includes three projects:

• The TicTacToe server.
• The TicTacToe iOS client.
• A shared library for the server and client apps.

The shared library includes some shared code, mainly a Message object that is used to wrap communication between the server and client.

Setup iOS Project

The first step is to create an iOS project called TicTacToe. Use the SpriteKit game template for this project.

After the project is created, create a Podfile in the TicTacToe directory and make sure to include the Starscream cocoapod into our TicTacToe target:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '9.0'
use_frameworks!

target 'TicTacToe' do
  pod 'Starscream', '~> 3.0.2'
end

After running pod install, we should now have a TicTacToe workspace. The project should build without any issues.

Setup shared code project

In order to setup the shared code project, create a new macOS Cocoa Framework project called TicTacToeShared. I suggest saving the project in TicTacToe/TicTacToeShared.

Now we need to add an iOS target. I'd prefer if we'd be able to use a framework, but I couldn't get it to work - there seemed to be some linking issue when used in the iOS app. So for iOS I suggest creating a Cocoa Touch static library target.

Now make sure the Product Name in the build settings is TicTacToeShared for both targets. The product name is used for importing the library into our server and client projects.

Setup server project

Now it's time to create the server project. Inside the TicTacToe directory, we create a directory called TicTacToeServer. Download the Perfect template project into this directory as follows:

cd TicTacToeServer
git clone https://github.com/PerfectlySoft/PerfectTemplate.git .

Now, open the Package.swift file and change the name to TicTacToeServer and include the Perfect WebSockets package as a dependency:

// Generated automatically by Perfect Assistant Application
// Date: 2017-09-20 19:30:47 +0000
import PackageDescription
let package = Package(
  name: "TicTacToeServer",
  targets: [],
  dependencies: [
    .Package(url: "https://github.com/PerfectlySoft/Perfect-HTTPServer.git", majorVersion: 3),
    .Package(url:"https://github.com/PerfectlySoft/Perfect-WebSockets.git", majorVersion: 3),
  ]
)

Run swift package generate-xcodeproj to generate an Xcode project. Make sure the project builds and runs correctly. Afterwards, the server project can now be included into the previously created workspace. You might have to edit the TicTacToeServer build settings however to make sure that the only supported platform is macOS.

Include the shared library in the client and server projects

In order to include the shared library into our client and server project, perform the following steps:

• Open the iOS app workspace.
• Add the shared library project to the workspace.
• Add the server project to the workspace.
• Go to the build settings of the TicTacToeServer target and link the TicTacToeShared framework.

Afterwards make sure all 3 projects still compile without any issues.

Continue to part 2 of the tutorial.