How I used 5 iDevices to play piano (MultipeerConnection framework)

Multipeer Connection framework is used by iOS developers to create multiple device experiences, like multiplayer games. This framework was built over bonjour protocol, implemented in iOS 7 and presented at WWDC 2013, although it has lost its shine over the years, MPC remains a fantastic tool. This article intention is to provide you with a simple implementation of a Multipeer Connection framework application: to play piano using several devices. So, let's go!

This project can be downloaded from GitHub:

Table of Contents:

  • How iOS Multipeer Connection works?
  • How to pass information between devices?
  • How to implement Multipeer Connection?
  • How to create a Piano with MPConnection?

How iOS Multipeer Connection works?

The Multipeer Connectivity framework uses a device wireless capabilities to detect nearby devices running the same framework, making communication between gadgets possible. So, it uses the Wifi and Bluetooth to exchange information between iPads and iPhones to create multiplayer apps or simply impress someone.

How to pass information between devices?

MultipeerConnection exemplification (Reference: WWDC 13)

To pass information between two devices your app needs to establish a peer-to-peer session for communication. To clarify how this connection works imagine the follow situation: two persons that need to talk to each other, Marco and Alex.

  1. Marco calls everybody around him.
  2. Alex is searching for a nearby person to talk.
  3. When Alex hears Marco calling, he replies to Marco with a connection request.
  4. Marco can accept or reject Alex's request. If Marco accepts the request, a pear-to-pear session between them is created, and now, they can both talk.

Super easy!

To dot the I’s and cross the T's, we'll call Marco, Advertising and Alex, Browser. So, now we can understand the Multipeer Connection operation.

How to implement Multipeer Connection?

To implement a multipeer connection we need to use three delegates: MCNearbyServiceBrowserDelegate, MCNearbyServiceAdvertiserDelegate and MCSessionDelegate. If you read the last session you can guess what each delegate can do. So, create a class using Xcode and import MultipeerConnectivity framework. To manage our sessions and peers we need to instantiate some variables, like a session, a peerId (device identification), a service to keep the advertiser and a service to keep the browser.

And finnaly we need to implement the delegates:

MCNearbyServiceBrowserDelegate

With this delegate you can see MultiConnection services search in others devices. When the framework find other device, it will automatically invite the peer to connect. I suggest you create an extension of your class to keep things organized:

MCNearbyServiceAdvertiserDelegate

With MCNearbyServiceAdvertiserDelegate is possible to accept invitations from a browser. To keep things organized I created an array of pears, which each new pear is appended to. The most important line of the following code is invitationHandler(true,self.session), with this line you can create a logic to choose if the advertiser is going to accept or deny the invitation from the browser. I chose to accept all invitations from all browsers.

MCSessionDelegate

This final delegate is the most important part, because with MCSessionDelegate you can receive and send data from session. The best way to receive session data in your Controller is by implementing a protocol.

Protocol allow us to exchange data between controllers in an easy and simple manner. So, create a protocol called PeerServiceManagerDelegate and add two functions: connectedDevicesChanged and contentChanged.

Controller Initialization

To finish our implementation we need to write the init, deinit and send methods. In the init method we initialize and start our services, like the advertiser, and the browser. With deinit we make the opposite, we stop our service to avoid problems with memory and unnecessary processing. And with send(string: String) we send our strings to other pears.

How to create a Piano with MPConnection?

Until now we have created our class to manage the pear-to-pear connection. So, we need to find a way to use this, right? I found the best solution for you, a piano :D.

My approach was to create five keys in one iDevice (advertiser), and configure the other ones to be browsers, playing the respective musical note (Do,Re,Mi,Fa,Sol). So, with five devices we'll have one device for musical note. And if I have two devices? Can I play? Of course you can, just agroup more notes by device.

Let’s implement our piano! First, in your ViewController import MultipeerConnectivity and implement PeerServiceManagerDelegate. To do this we need to instantiate your manager created in the last section and set the delegate in your ViewController, don’t forget to put the following code in your viewDidLoad:

peerService.delegate = self

And implement the delegate by extending of your class:

As the intention of this tutorial is to show the Multipeer connection implementation I won't go into further details of this implementation. However, you can see the rest of it at my GitHub account:

Thanks for reading!

Authors

Leonardo A. de Geus https://github.com/leodegeus7 |

https://www.linkedin.com/in/leodegeus7/

Dilermando Barbosa https://github.com/dbarbos |

https://www.linkedin.com/in/dilermandob/

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store