APIs are infrastructure. They get embedded into other people's code, called millions of times a day, and judged on latency before anyone ever reads your marketing page. Pricing them like traditional SaaS (pick a seat count, charge monthly, call it a day) will get you in trouble fast.

The economics are different. Traditional SaaS companies enjoy 80-90% gross margins because serving one more user costs almost nothing. APIs, especially ones that touch AI inference, realtime connections, or heavy compute, carry real variable costs. Every call burns CPU cycles, memory, and bandwidth. AI-native APIs often operate at 50-60% margins. If your pricing doesn't reflect that reality, growth becomes a problem you can't afford.

I've spent years working on pricing for SaaS and developer tools, and the pattern I see most often is founders treating their API pricing page as an afterthought. They ship the product, copy a competitor's pricing table, and figure they'll "optimize later." Later usually arrives as a margin crisis or a churn spike.

This guide covers the decisions that matter most: choosing a value metric, designing a free tier, picking a packaging model, using rate limits strategically, and avoiding the mistakes that quietly drain revenue.

Choose a Value Metric That Scales With Your Customer

The value metric is the unit your customer pays for. It's the single most important decision in your pricing architecture, because it determines whether your revenue grows naturally as your customers succeed, or stalls while they scale.

A good value metric satisfies three conditions. It's easy for the developer to understand and predict. It aligns with the value they actually get from your product. And it correlates with your cost to serve them.

The industry has largely moved from charging for "access" to charging for "consumption." But consumption means different things depending on what your API does.

Common API value metrics and when to use each

Concurrent connections work best for realtime infrastructure: WebSockets, IoT, pub/sub. You're billing based on how many devices or users are simultaneously connected. The cost driver here is server memory, since each persistent connection holds open a socket.

Events or messages fit transactional workloads: email delivery, SMS, chat messages. You charge per discrete payload sent or received. Postmark charges per email. Twilio charges per SMS. The math is simple and the developer can forecast costs accurately.

Tokens are the standard for LLM and generative AI APIs. Because GPU utilization varies wildly based on prompt length and model size, time-based or seat-based pricing is economically unviable. OpenAI differentiates between input and output tokens, and offers steep discounts for cached inputs (up to 90% off) to incentivize developers to optimize their prompts. The pricing model itself becomes a behavioral lever, rewarding efficient architecture.

Compute time applies to serverless functions and edge computing. Cloudflare Workers and AWS Lambda bill per millisecond of CPU execution, usually combined with a per-request fee. Generous free tiers are standard here.

API requests (raw) work for search, geocoding, and data enrichment. Algolia and Google Maps charge fractions of a cent per HTTP request. Simple, but it can penalize developers whose workflows require multiple calls to complete a single action.

Credits act as an abstraction layer over complex or variable compute costs. The developer buys a block of credits, and different operations burn them down at different rates. A simple query might cost 1 credit while a multi-step AI reasoning task costs 50. Credits work well when your backend costs vary too much to expose raw pricing per operation, but they require a clear exchange rate so developers can forecast spend.

Outcomes represent the frontier. Instead of charging for resources consumed, you charge for business results achieved. Intercom moved from per-seat pricing to charging $0.99 per AI-resolved support conversation. Sierra charges only when their AI agent completes a specific valuable action like saving a membership or closing an e-commerce purchase. Outcome-based pricing shifts risk to the vendor, but it increases willingness to pay because the buyer only pays when they get value.

How realtime APIs handle dual-metric pricing

Realtime APIs face a particular challenge: they have two distinct cost drivers that scale independently. Persistent connections consume server memory. High-frequency messages consume CPU and bandwidth. A small number of users sending millions of messages can exhaust your bandwidth, while millions of idle connections can exhaust your memory. Either one can blow up your infrastructure costs.

Some providers solve this with a dual-metric approach, pricing on both concurrent connections and events per day across tiered plans. For example, a Growth tier might cap at 10,000 concurrent connections and 20 million events per day. This dual constraint protects against both abuse vectors simultaneously.

Others have moved toward pure consumption models. Ably recognized that peak connection pricing created "wastage" for developers (they paid for capacity they weren't using during off-peak hours) and shifted to billing per million connection-minutes and per million messages. The cost scales elastically with actual load.

The tradeoff is simplicity versus accuracy. Dual metrics are harder to explain on a pricing page but reflect real infrastructure costs more honestly. Single metrics are easier to sell but may leave money on the table or create abuse vectors.

Design a Free Tier That Actually Converts

For developer tools, the free tier is the primary distribution channel. Developers evaluate an API by writing code against it. They need to test latency, read the docs, explore edge cases, and integrate it into a staging environment before they'll consider paying. If your API sits behind a "Contact Sales" wall or a credit card requirement, you're cutting off bottom-up adoption at the root.

But free tiers are expensive. Compute costs money. The question is whether your free tier functions as a customer acquisition engine or an infrastructure drain.

Why time-bound trials fail for APIs

Time-bound free trials (14 or 30 days of full access) are standard in B2B SaaS, but they consistently underperform for developer APIs. The reason is workflow mismatch. A developer implements your API in a local environment, tests it, and then leaves it idle for weeks while working on other parts of their application. By the time they're ready to push to production, the trial has expired.

Perpetual freemium models bounded by usage constraints convert significantly better. Benchmark data shows the median free-to-paid conversion rate for B2B SaaS is around 8%, but top-quartile developer tools with optimized freemium models achieve 15-28%. The mechanism is straightforward: the API becomes embedded in the codebase. Once the developer hits the usage limit, upgrading is cheaper than switching.

Structuring limits to prevent abuse without punishing builders

The free tier needs to be generous enough for full end-to-end prototyping, but restrictive enough that any application generating real business value has to upgrade.

Supabase has an elegant approach: free projects auto-pause after 7 days of inactivity. This automatically purges abandoned projects, tutorial follow-alongs, and dead side-projects from active server memory. The developer who's actually building something won't notice, because their project stays active. If they want the database permanently awake, they upgrade to the $25/month Pro tier.

On the other end, watch for the burner-account anti-pattern. If developers are creating multiple accounts with different email addresses to dodge your free limits, one of two things is true: your starter tier is too expensive for the value it delivers, or your limits are too easy to manipulate. The fix usually isn't device fingerprinting. It's adjusting the economics so the pain of maintaining multiple accounts outweighs the cost of just upgrading.

Pick Your Packaging Model: Pay-as-You-Go, Tiers, or Hybrid

The API industry is split on packaging. Pure usage-based pricing minimizes onboarding friction but creates anxiety. Tiered pricing creates predictability but introduces pricing cliffs. The data from 2025-2026 points toward a hybrid model as the most effective approach for developer tools.

Pure pay-as-you-go

In a pure PAYG model, there's no base fee. The developer pays only for what they consume. Twilio is the textbook example, charging $0.0083 per outbound SMS. Firebase's Blaze plan works similarly: a small free allowance, then granular per-operation charges.

The upside is frictionless onboarding. Initial cost is zero, which perfectly matches the budget of an early-stage startup. The downside is bill shock. Developers rationally fear that a coding bug, an infinite retry loop, or a bot attack will generate an enormous overnight invoice. And for the provider, revenue forecasting becomes difficult when income fluctuates with end-user engagement and macroeconomic trends.

Tiered subscriptions

Tiered models bundle a set allowance of usage into a fixed monthly price. Supabase's $25/month Pro tier includes 8GB of database space, 100GB of file storage, and 100,000 monthly active users, with usage-based overages beyond that.

Tiers function as a psychological insurance policy. The developer knows their baseline cost. Enterprise finance teams can allocate budget. The risk for the provider is breakage in both directions: if a developer only uses $5 of infrastructure on a $25 plan, you enjoy a high margin but they may feel overcharged. If a heavy user blows past the included limits without overage enforcement, your margins evaporate.

The hybrid model (and why most successful APIs land here)

The current consensus among leading developer tools is the hybrid model: tiered base subscriptions to capture platform fees, fund support, and guarantee minimum recurring revenue, paired with metered overages to capture the upside of hyperscale usage.

Stripe's billing infrastructure evolved specifically to support this. With their Meters API and the Metronome acquisition, platforms can charge a flat platform fee while aggregating real-time usage events for dynamic overages. This lets API providers run complex multi-dimensional pricing (charging for compute time, bandwidth, and API calls simultaneously) without building a proprietary billing engine from scratch.

The hybrid model gives CFOs predictability and gives infrastructure providers scalability. For most developer tool founders, it's the right starting point.

Use Rate Limits as a Pricing Lever

Rate limits exist to protect your servers from DDoS attacks and ensure stability. They're also one of the most underused pricing levers in developer tools.

By mapping specific rate limits to pricing tiers, you force high-traffic users to upgrade for throughput, not just for total monthly volume. Cloudflare enforces 1,200 requests per 5 minutes for basic tokens but allocates much higher burst limits for enterprise plans. GitHub caps standard OAuth apps at 5,000 requests per hour but extends that to 15,000 for Enterprise Cloud organizations.

When developers hit a rate limit, the API returns an HTTP 429 "Too Many Requests" status code. Best practice is to include a Retry-After header in the response. But some providers turn even this into a pricing differentiator: free users get a generic 429 error, while paid users get precise headers showing exactly when they can resume queries. Operational transparency becomes a feature worth paying for.

The broader principle: your pricing page shows the monetary cost. Your rate limits, quotas, and overage handling define the actual developer experience. Both need to be designed together.

Avoid the Five Mistakes That Kill API Revenue

Charging flat rates for variable workloads

A simple GET request to retrieve a cached user profile takes milliseconds. A complex POST request triggering database writes, external webhooks, or multi-step AI inference takes orders of magnitude more compute. Charging the same flat subscription regardless of usage means heavy users subsidize light users, and your margins decay as the platform scales. Granular pricing per method (or at minimum, per operation class) solves this.

Billing for infrastructure instead of value delivered

If your API requires three calls to authenticate, query, and confirm an action, charging for all three frustrates developers. They feel like they're paying for your architectural overhead. The value metric should track the successful completion of whatever the developer is actually trying to do. Charge for the outcome, not the plumbing.

Hiding pricing behind "Contact Sales"

Developers want to read the docs, look at the pricing page, and start building. If they need to schedule a sales call to discover the base price, they'll pivot to an open-source alternative or a competitor with transparent pricing. Supabase publishes exact database sizes, compute allowances, and fractional overage costs per gigabyte. They also explain why their pricing works the way it does, which builds trust with engineering buyers who are used to being sold to by enterprise salespeople.

Transparency is a feature. In many cases, it's the feature that wins the deal.

Shipping without usage dashboards or cost previews

Developers hate surprise bills. If you charge on usage but don't provide a real-time dashboard tracking that usage, trust erodes fast. Cost previews (showing the estimated cost of an operation before it executes) are becoming standard, especially for AI APIs where a single prompt can vary 100x in cost depending on the context window. Give developers full visibility into what they're spending, before the invoice arrives.

Treating documentation as an afterthought

When documentation lacks clear error codes, authentication guides, and copy-paste code snippets in popular languages, developers flood your support queues. Every support ticket raises your cost of customer acquisition. Strategic documentation is a financial optimization: it lowers the barrier to the first successful API call and accelerates time-to-revenue. Good docs can cut onboarding from weeks to hours.

The Pricing Trends Worth Watching

Three shifts are worth paying attention to as API pricing continues to evolve.

Credit-based pricing is surging, especially for AI-powered tools. When your backend costs vary wildly based on prompt complexity and context window size, exposing raw per-token or per-compute-second pricing can terrify developers. Credits abstract that complexity into a digestible unit. A simple query costs 1 credit, a complex reasoning task costs 50. The key is pairing credits with real-time usage dashboards and spending caps so developers maintain control.

Outcome-based pricing is the logical endpoint of value alignment. Intercom abandoned per-seat pricing for their Fin AI agent and switched to $0.99 per AI-resolved conversation. They saw 40% higher adoption while maintaining healthy margins. Sierra followed a similar path, charging only when their AI agents achieve specific business outcomes. This shifts risk to the vendor, but it also removes the biggest objection from the buyer: "what if it doesn't work?"

Machine-to-machine micropayments are emerging as AI agents become primary API consumers. Human-in-the-loop billing (signups, credit cards, monthly invoices) creates friction when the "customer" is an autonomous agent making thousands of calls per minute. Protocols using the HTTP 402 "Payment Required" status code are being developed to enable programmatic, sub-cent transactions. This could unlock monetization for high-frequency, low-value API calls that are currently unprofitable to process through traditional payment rails.

Conclusion

How you price your API says something about how you view your developers. Transparent tiers, generous free plans, and clear usage dashboards tell developers you see them as engineering partners. That signal matters more than most founders realize.

In a world where AI-assisted migrations are steadily lowering switching costs, developer trust and pricing transparency are the moat. Get your value metric right, give builders room to experiment before they pay, and make sure your pricing scales honestly with the value you deliver.

If you're a founder working through these decisions and want structured help, Potio specializes in pricing strategy for SaaS and developer tools. And if you're evaluating whether to bring in outside expertise at all, I wrote a separate piece on how to choose a pricing consultant for your company that covers what to look for and what to avoid.

FAQ

What's the best value metric for an AI API?

Tokens are the current standard because GPU costs vary so much based on model size and prompt length. Differentiate between input and output tokens, and consider discounts for cached inputs to incentivize efficient usage patterns. If your AI product delivers clearly measurable outcomes (like resolved support tickets), outcome-based pricing may outperform raw token billing.

Should I offer a free tier or a free trial for my API?

A perpetual free tier with usage limits almost always outperforms a time-bound trial for developer APIs. Developers need to prototype, go idle, and come back weeks later. A 14-day trial expires before their app hits production. Usage-bounded freemium gives them room to build and creates natural upgrade pressure once the application generates real traffic.

How do I prevent bill shock for my API customers?

Three mechanisms: real-time usage dashboards so developers can see their consumption before the invoice, configurable spending alerts at 80% and 100% of their tier, and developer-controlled hard caps that automatically stop usage at a defined budget threshold. The goal is to give the developer control over their own risk exposure.

When should I use credit-based pricing instead of raw usage metrics?

Credits work best when your backend costs vary significantly across different operations and exposing raw per-unit prices would confuse developers or create anxiety. They abstract variable compute costs into a single, predictable currency. The tradeoff is transparency: you need a clear credit-to-operation mapping so developers can forecast their spend. If your API does one thing at a consistent cost, raw usage pricing is simpler and more trustworthy.

How do I know if my free tier is too generous?

Two signals. First, if your free-to-paid conversion rate is well below 8% (the B2B SaaS median), your free tier might be providing enough capacity for lightweight production use. Second, if you see developers creating multiple accounts to dodge limits, either your paid tier is too expensive for the value or your free limits are easy to game. Track how many free-tier users approach their limits and what percentage upgrade versus churn. That ratio tells you whether your free tier is doing its job.

Check out the live example 🚀. As well as the full source code on GitHub 👩🏽‍💻.

In the world of web apps, adding chat features used to be a nice extra, but now it's a must-have. Think about having an online store, a social network, or a tool for working together without the option to chat in real time. It's like having a phone without being able to make calls - it just doesn't work.

Imagine this: a user is using your web app and wants to talk to a friend. With chat, they don't have to leave the app to chat in real time; they can do it right within the app.

In this tutorial, we'll show you how to do this. We'll build a chat app using Vue.js and a tool called Scaledrone, which makes real-time chatting really easy. The app will work like Messenger, WhatsApp, or Telegram.

We'll use the modern Vue.js 3 web app framework and follow the best practices, like the Composition API and Single-File Components.

By the end, this is what our chat app will look like:

And here's the cool part: the users of your Vue chat app will be able to chat with mobile users if you've already built an app using our iOS and Android chat tutorials.

Let's get started!

Setting Up a Vue.js Chat App

To focus on the meat of creating a Vue.js chat app, we took care of some of the scaffolding for you. You can begin by cloning the starter branch of this tutotorial's GitHub repository.

git clone -b starter https://github.com/ScaleDrone/vue-chat-tutorial.git

Aside from a couple of empty folders and an empty Vue.js web app, this project also contains some CSS to make your chat app look nicer.

Next, build Vue.js 3 and its dependencies using the Node package manager:

npm install

Note: Follow the instructions to install npm and Node.js if you don't have them on your machine.

Finally, you can run the app:

npm run dev

The command will run your app on localhost:5174, although if you visit the site it will be wholly unimpressive — a blank screen. Don't worry, you'll see your chat app come alive in no time!

Showing Chat Messages Using Vue Components

Your chat app with consist of three main parts:

1. App.vue which will take care of the main business logic of fetching chat messages and managing users as well as connect all of the UI together.
2. A Messages component that will show a list of messages.
3. An Input component with a text field and button so that we can send our messages.

App.vue is already provided for you in the src folder, and we'll modify it later. But first, we'll create a Messages component.

Create a new file in your src/components folder called Messages.vue. Create a new component in this file called Messages like in the following code:

<script setup>
import { onUpdated, ref } from 'vue';
import Message from './Message.vue';

const props = defineProps({
  messages: Array,
  me: Object,
});

const bottomRef = ref(null);

onUpdated(() => {
  bottomRef.value.scrollIntoView({ behavior: 'smooth' });
});
</script>

The component will receive the messages it should display as a prop from App. We'll render a list containing each message. The list items themselves will contain the sender's name and avatar, as well as the text of the message.

Looking at the code, you might be wondering what bottomRef and onUpdated do.

When a new message arrives, you don't want to waste time repeatedly scrolling through a long list of previous messages just to reach the latest one. Instead, your app should automatically take you to the most recent message as soon as it appears. You do this using bottomRef, which is a reference to an empty div positioned beneath the latest message.

For this to happen automatically, you'll use Vue's onUpdate lifecycle function. This function allows you to register a callback that gets executed each time the component is rendered. Within the callback, you instruct Vue to scroll down to bottomRef, ensuring that you always end up at the very latest message.

Next, add a template to the file to make sure we show a list of messages:

<template>
  <ul class="messagesList">
    <Message 
      v-for="message in messages" 
      :key="message.id" 
      :member="message.member" 
      :data="message.data" 
      :id="message.id"
      :me="me" />
    <div ref="bottomRef"></div>
  </ul>
</template>

Messages returns a list of Message components, which you'll implement next.

Add another component in the folder called Message.vue. Add the following code to the file:

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  member: Object,
  me: Object,
  data: String,
  id: String,
});

const { username, color } = props.member.clientData;
const messageFromMe = props.member.id === props.me.id;
const className = messageFromMe
  ? "messagesMessage currentMember"
  : "messagesMessage";
</script>

Each message is linked to a specific member (user), and every member is identified by an ID, username, avatar and a personalized color. Here, you check whether the message came from you or another user. This distinction is helpful because it allows us to display our own messages on the left side.

Next, add the following template to the file:

<template>
  <li :key="id" :class="className">
    <span class="avatar" :style="{ backgroundColor: color }" />
    <div class="messageContent">
      <div class="username">{{ username }}</div>
      <div class="text">{{ data }}</div>
    </div>
  </li>
</template>

The template shows the user's avatar, their name, and the message's content.

Now that we have the Messages component, we need to make sure App.vue actually renders it. Head over to src/App.vue and add an import of the Messages component to the top of the file:

import Messages from './components/Messages.vue';

We talked about showing usernames and avatars in our app earlier. Usually, you'd have a login screen to collect this info.

But for this tutorial, let's keep it simple. We'll make up random names and colors for the avatars. You can do this by adding the following functions just below the import statement:

function randomName() {
  const adjectives = [
    'autumn', 'hidden', 'bitter', 'misty', 'silent', 'empty', 'dry', 'dark',
    'summer', 'icy', 'delicate', 'quiet', 'white', 'cool', 'spring', 'winter',
    'patient', 'twilight', 'dawn', 'crimson', 'wispy', 'weathered', 'blue',
    'billowing', 'broken', 'cold', 'damp', 'falling', 'frosty', 'green', 'long',
    'late', 'lingering', 'bold', 'little', 'morning', 'muddy', 'old', 'red',
    'rough', 'still', 'small', 'sparkling', 'shy', 'wandering',
    'withered', 'wild', 'black', 'young', 'holy', 'solitary', 'fragrant',
    'aged', 'snowy', 'proud', 'floral', 'restless', 'divine', 'polished',
    'ancient', 'purple', 'lively', 'nameless'
  ];
  const nouns = [
    'waterfall', 'river', 'breeze', 'moon', 'rain', 'wind', 'sea', 'morning',
    'snow', 'lake', 'sunset', 'pine', 'shadow', 'leaf', 'dawn', 'glitter',
    'forest', 'hill', 'cloud', 'meadow', 'sun', 'glade', 'bird', 'brook',
    'butterfly', 'bush', 'dew', 'dust', 'field', 'fire', 'flower', 'firefly',
    'feather', 'grass', 'haze', 'mountain', 'night', 'pond', 'darkness',
    'snowflake', 'silence', 'sound', 'sky', 'shape', 'surf', 'thunder',
    'violet', 'water', 'wildflower', 'wave', 'water', 'resonance', 'sun',
    'wood', 'dream', 'cherry', 'tree', 'fog', 'frost', 'voice', 'paper', 'frog',
    'smoke', 'star'
  ];
  const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
  const noun = nouns[Math.floor(Math.random() * nouns.length)];
  return adjective + noun;
}

function randomColor() {
  return '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16);
}

To make things interesting, we'll create usernames by mixing random adjectives with nouns, giving us usernames like "hiddensnow" or "wanderingfrog." As for the colors, we'll keep them as unique as possible by choosing random hex numbers and converting them to HTML color codes.

Now that we have those functions, we can use them to set our initial state in App. Add the following below the two functions you just created:

const messages = ref([{
  id: '1',
  data: 'This is a test message!',
  member: {
    id: '1',
    clientData: {
      color: 'blue',
      username: 'bluemoon',
    },
  },
}]);
const me = ref({
  id: '0',
  clientData: {
    color: randomColor(),
    username: randomName(),
  },
});

For the time being, our initial state will be one test message from a mysterious hard-coded user called bluemoon. As for our own identity, we'll use a randomly generated name and color.

Next, update the template by adding the following inside the <div class="appContent"> element:

<Messages :messages="messages" :me="me" />

This will allow you to display a list of chat messages, using the component you created earlier.

Head back to your browser to see your chat message!

Adding a Text Field Input to the Web App

Now that we have a way to display our messages, we need a way to type them! You'll create a new Vue component called Input that contains a text field and a send button. The component itself won't send any messages but will call a callback whenever someone clicks the send button.

Create a new file in the src/components folder called Input.vue. Add a new component to the file:

<script setup>
import { ref, onMounted, defineProps } from 'vue';

const props = defineProps({
  onSendMessage: Function,
});

const text = ref('');
</script>

<template>
  <div class="input">
    <form @submit.prevent="onSubmit">
      <input v-model="text" @input="onChange" />
      <button type="button" @click="onSubmit">Send</button>
    </form>
  </div>
</template>

This component will have a text field to enter the message along with a button to send it. We'll keep track of the currently entered text in our text reference. You'll notice we connected a function called onChange to the input element. Add that function inside the script setup element:

function onChange(e) {
  const textValue = e.target.value;
  text.value = textValue;
}

This will make sure we always have the most recently typed message inside the text reference.

Next, we need to handle sending the message, so add the following function:

function onSubmit() {
  props.onSendMessage(text.value);
  text.value = '';
}

To send the message, we'll use a callback inside the component's props which we'll receive from App. We'll also update the ref so that we clear the text field.

Now Input is all done!

Just like we did with Messages, we need to make sure App will render Input. Head over to src/App.vue and add the import for your new component to the top of the file:

import Input from './components/Input.vue';

Next, update the contents of the render method to show the Input component inside the appContent div:

<Messages :messages="messages" :me="me" />
<Input :onSendMessage="onSendMessage" />

Notice that you pass a callback (onSendMessage) to Input. Input will call this each time the user presses the send button.

Finally, you'll implement that callback to "send" a message. Add the following function just before the closing </script> tag:

function onSendMessage(message) {
  const newMessage = {
    data: message,
    member: me.value
  }
  messages.value.push(newMessage)
}

For now, we'll just add it to the messages array. Later, we'll connect this to a web service to actually send messages back and forth.

If you head back to your web browser you should see an input field. Type in a message, hit Enter, and watch your message display in the list.

Look at this, your chat app is taking shape! Kudos to you!

Showing a List of Online Members in a Chat App

Before we connect everything to a web service, there is one more part of our chat UI that we'll tackle. In a group chat setting, it's useful to show a list of currently active users. We'll do that with a simple Vue component.

Create a new file in src/components called Members.vue. There, you can add the following code:

<script setup>
import Member from './Member.vue';
import { defineProps } from 'vue';

const props = defineProps({
  members: Array,
  me: Object,
});
</script>

This will be a simple, stateless component that takes a list of members and the current member.

Next, add a template to the file:

<template>
  <div class="members">
    <div class="membersCount">
      {{ members.length }} user{{ members.length === 1 ? '' : 's' }} online
    </div>
    <div class="membersList">
      <Member v-for="member in members" :key="member.id" :id="member.id" :client-data="member.clientData"
        :is-me="member.id === me.id" />
    </div>
  </div>
</template>

Using the two pieces of data from props, this code renders a list of Member components, which you'll add as a separate src/components/Member.vue file:

<script setup>
const props = defineProps({
  id: String,
  clientData: Object,
  isMe: Boolean,
});
</script>

<template>
  <div :key="id" class="member">
    <div class="avatar" :style="{ backgroundColor: clientData.color }" />
    <div class="username">{{ clientData.username }} {{ isMe ? ' (you)' : '' }}</div>
  </div>
</template>

This component shows the member as text, adding "(you)" to the end of the text if it's the current user's username.

By now you probably know what's coming next.

We'll show this component from src/pages/index.js. Head on over there and add a new import to the top of the file:

import Members from './components/Members.vue';

Next, add a new reference right after where me is declared:

const members = ref([{
  id: "1",
  clientData: {
    color: 'blue',
    username: 'bluemoon',
  },
}]);

This state variable will keep track of active members. For now, we'll hard-code a member. In the next section, we'll fetch members from a web service.

Finally, add your new component to the JSX, right above Messages:

<Members :members="members" :me="me" />
<Messages :messages="messages" :me="me" />

Run the app again and you'll see bluemoon in the list of chat members!

Now, let's roll up our sleeves and connect everything to a real web service using Scaledrone.

Connecting the Chat App to a Web Service

At first, the thought of creating a chat application that seamlessly delivers messages in real time can be a bit daunting. Fortunately, Scaledrone comes to the rescue, simplifying the business logic involved in developing such an app.

Before we dive into its usage, though, we have to ensure that Scaledrone is part of our app. Here's how.

Installing Scaledrone is as easy as ading a JavaScript script inside your Vue project. Open index.html in the root folder of the project. Inside the head tag, add the following line to the bottom of the tag:

<script type='text/javascript' src='https://cdn.scaledrone.com/scaledrone.min.js'></script>

This will make sure Scaledrone's code is included in our app. We're almost ready to start using it, but we need to do one more thing first: create a Scaledrone channel.

To successfully connect to Scaledrone, you need to get your own channel ID from Scaledrone's dashboard. If you haven't already, head over to Scaledrone.com and register an account. Once you've done that, go to your dashboard and click the big green +Create Channel button to get started. You can choose Never require authentication for now. Note down the channel ID from the just created channel, you'll need it in a bit.

Head back to src/App.vue. We'll add a function to connect to Scaledrone, but first, we need to do a bit of prep work.

Add a new top-level object to the file inside the script setup tag:

let drone = null

We'll use this variable to store a global Scaledrone instance that we can access in the component.

Add a new function to the top of the component to connect to Scaledrone:

function connectToScaledrone() {
  drone = new window.Scaledrone('YOUR-CHANNEL-ID', {
    data: me.value,
  });
  drone.on('open', error => {
    if (error) {
      return console.error(error);
    }
    me.value.id = drone.clientId;
  });
}

This will create a new instance of Scaledrone. Just remember to replace the string with the channel ID you got earlier. Since we're loading the script inside our HTML head tag, the script's contents will be attached to the global window object. That's where we'll ultimately fetch our Scaledrone instance from.

We'll also pass Scaledrone the data for the currently logged-in member. If you have additional data about the user or the client, this is a good way to supply that data, instead of having to send it with each message.

Moving on, we need to connect to a room. A room is a group of users that we can send messages to. You listen to those messages by subscribing to a room of a specific name. Add the following code to the end of the function you just created:

const room = drone.subscribe('observable-room');

We'll subscribe to a room.

Note: You might have noticed that we named our name Scaledrone room observable-room. You can name the room anything you want, a single user can actually connect to an infinite amount of rooms for all sorts of application scenarios. However, in order for messages to contain the info of the sender, you need to prefix the room name with "observable-". Read more...

We also need to know when the messages arrive, so we'll subscribe to the "message" event on the room. Add the following code to the end of the constructor:

room.on('message', message => {
  const { data, member } = message;
  messages.value.push(message)
});

When we get a new message, we'll add the message's text as well as the client data to our state.

Similarly, we need to track the logged-in members:

room.on('members', newMembers => {
  members.value = newMembers;
});
room.on('member_join', member => {
  members.value.push(member);
});
room.on('member_leave', ({ id }) => {
  const index = members.value.findIndex(m => m.id === id);
  members.value.splice(index, 1);
});

Scaledrone gives up the logged in members when we join and then keeps us updated when someone else joins or leaves. We'll make sure to keep our state variables updated with the correct members.

Now you just need to make sure the function is called when the component loads. Add this code right below the function definition:

onMounted(() => {
  if (drone === null) {
  	connectToScaledrone();
  }
});

You do a small check to make sure Scaledrone is not already connected and then call the function.

Next, we need to modify onSendMessage to publish a new message to all the other users in the room:

function onSendMessage(message) {
  drone.publish({
    room: 'observable-room',
    message,
  });
}

Scaledrone makes this a simple matter of calling the publish function with the data.

Finally, we'll remove the test message and other hard-coded data from the refs so that the initial state looks like the following:

const messages = ref([]);
const members = ref([]);
const me = ref({
  username: randomName(),
  color: randomColor(),
});

If you switch to your web browser at this point, you'll notice that the behavior remains the same: when you send a new message, it should appear in the list. The difference is that this time it's actually being sent to Scaledrone. Feel free to open the app in another tab and chat with yourself. :)

Adding a Typing Indicator to a Vue Chat App

When you're chatting away on an app, you'd like to know what's happening on the other side. Has the other person seen your message? Are they typing back? Thankfully, with nifty features like 'read' notifications and typing indicators, chat apps keep us in the loop.

Fear not; Scaledrone makes this a walk in the park. Let's see how it's done.

Creating a Vue Typing Indicator Component

As you can assume, we'll now add a typing indicator. Ours will display a message like "hiddenstar is typing."

The first step includes creating a new Vue component that will render the typing text. To begin, create a new file in src/components called TypingIndicator.vue. Then, add the following code:

<script setup>
import { defineProps, computed } from 'vue';

const props = defineProps({
  members: Array,
});

const typingText = computed(() => {
  // 1
  const names = props.members.map((member) => member.clientData.username);
  if (names.length === 0) {
    return '';
  }
  // 2
  if (names.length === 1) {
    return `${names[0]} is typing`;
  }

  return `${names.slice(0, -1).join(', ')} and ${names.slice(-1)} are typing`;
});
</script>

This component will eventually add a small div that gets filled with text inside typingText when someone is typing. You will pass a list of users that are currently typing to this component. Here's how it works:

1. First, you get a list of usernames of all the members that are currently typing. If nobody is typing, an empty string is returned.
2. If one person is typing, the text mentions their name such as "mysteriousrabbit is typing."
3. In case more people are typing, their names are joined using a comma as a separator. The text then reads something like: "mysteriousrabbit, coolfrog and bluecar are typing."

Next, add a template to the file to show the typing text:

<template>
  <div class="typingIndicator">
    <p>{{ typingText }}</p>
  </div>
</template>

Now that we have the component, we need code to show it on the web app. Open src/App.vue and import your new component at the top of the file:

import TypingIndicator from './components/TypingIndicator.vue';

Next, you have to modify the template to show the typing indicator right under the Messages component, like so:

<Messages :messages="messages" :me="me" />
<TypingIndicator :members="members.filter(m => m.typing && m.id != me.id)" />

The code above shows the new component and passes it a list of users who are typing by checking the typing property.

The UI is now set up, all that's left is to track and send the typing state.

Tracking if the User is Currently Typing in Vue

Right now, we aren't tracking users' typing status. And it's not as black and white as simply typing/not typing.

Someone could begin typing a message and then get sidetracked—maybe they felt like brewing a coffee—leaving their message unfinished. Conversely, if the typing indicator pops up every time someone pauses to hunt for the right emoji, it might just irk your users.

That's where Scaledrone and its optional library called Typing Indicator step in to handle all of this for you.

Note: While Typing Indicator is created by and for Scaledrone, it is framework-agnostic and works with any JavaScript application or website, whether's it's built in Vue, React or something else entirely.

To install Typing Indicator, navigate to the project folder in Terminal and type in:

npm i typing-indicator

This little command will install the library.

You'll track the typing state from src/components/Input.vue, so navigate there and import the library at the top of the file:

import TypingIndicator from 'typing-indicator';

let typingIndicator = null;

You also create a top-level variable to hold an instance of the typing indicator.

Next, change the definition of props to include a new function:

const props = defineProps({
  onSendMessage: Function,
  onChangeTypingState: Function,
});

onChangeTypingState is a callback that you'll define in App.vue, but Input will call it when the current user changes their typing state.

Then, you'll add a new typing indicator when the component loads by adding the following code inside the component, right below where the props are declared:

onMounted(() => {
  if (typingIndicator === null) {
    typingIndicator = new TypingIndicator();
    typingIndicator.listen(props.onChangeTypingState);
  }
});

When this component loads, you will register a callback to get called whenever a user begins or stops typing.

Next, we need to tell the typing indicator when the text changes, so update onChange to the following:

function onChange(e) {
  const textValue = e.target.value;
  typingIndicator.onChange(textValue);
  text.value = textValue;
}

The typing indicator does the heavy lifting of tracking typing states for you. All you need to do is connect it to a function, which, in this case, is onChangeTypingState, and tell it when the text has changed.

Now, let's wrap things up in src/pages/App.vue by passing the callback in. Navigate there and modify the Input declaration inside the template to the following:

<Input 
  :onSendMessage="onSendMessage" 
  :onChangeTypingState="onChangeTypingState" />

This will ensure that Input calls onChangeTypingState, which you'll implement next.

Sending and Receiving the Typing State to Your Web Service

Right now, you are passing onChangeTypingState to Input but you haven't yet created the function. The function needs to send a message to Scaledrone, letting other users know that the current user is typing.

To continue, add the following function above the closing </script> tag:

function onChangeTypingState(typing) {
  drone.publish({
    room: "observable-room",
    message: { typing },
  });
}

onChangeTypingState receives a boolean that indicates whether the user is typing or not. Using Scaledrone, you'll publish a new message with the updated typing state whenever it changes.

Next, we need to process the incoming typing messages and show the typing indicator. You'll do this in the connectToScaledrone. Modify the call to room.on('message', ...) to the following:

room.on('message', message => {
  const { data, member } = message;
  if (typeof data === 'object' && typeof data.typing === 'boolean') {
    const index = members.value.findIndex(m => m.id === member.id);
    members.value[index].typing = data.typing;
  } else {
    messages.value.push(message)
  }
});

Here's the breakdown of what this code does:
The code first evaluates the type of incoming message. If the message is a typing status, you identify the members currently typing and update their typing attribute. Otherwise, if it's a regular message, you add it to messages.

With this setup, you can monitor users' typing status and relay it to Scaledrone. When a new typing notification comes from Scaledrone, the user's typing attribute is updated. Lastly, the TypingIndicator component will use this status and display a typing indicator for users with typing set to true.

Head back to your browser to see the typing indicator in action!

All Wrapped Up!

There you have it! You've successfully crafted a modern Vue.js 3 chat application, and thanks to Scaledrone's capabilities, you made it seem like a breeze. The days of getting lost in backend code are over. With the aid of Scaledrone, you can dedicate yourself to refining your UI and enhancing your app's features without a second thought about backend hassles. **See the full source code for this Vue.js chat tutorial on GitHub.

But there's so much more potential for your chat app. Interested in expanding its features? Here are some cool additions you can add using Scaledrone's APIs:

• Share images and files
• Implement authentication
• Respond to specific messages
• Incorporate stickers and GIFs

If you have any questions or wish to share feedback, don't hesitate to reach out to us; we're always happy to connect.

Introduction

The importance and applications of realtime polling, realtime updates and data visualization can never be over emphasized. The convenience of casting votes online and the confidence that comes with knowing that your vote actually counts as you will see it do in realtime is one of the many reasons why so many countries, companies and individuals have come to adopt electronic opinion polls to gather data on the choices of the masses on relevant topics and ideas.

In this post, we’ll build a realtime voting system that will allow users to vote for their favorite football player and see their votes count in realtime. Of course you can extend this application to suit any use case that is particular to you, however, for the purpose of our demonstrations, we’ll stick to voting for players.

Prerequisites

A basic understanding of React and Node.js will help you get the best out of this tutorial. It is assumed that you already have Node and npm installed. If that’s not the case for you, kindly check Node.js and npm for further instructions and installation steps.

We’ll also use these tools:

Scaledrone - A realtime messaging platform that will power the realtime functionalities of our app. Go ahead and create a free account to gain access to the dashboard.

Axios: a promise-based HTTP client that works both in the browser and in a Node.js environment.

What we’ll build

We’ll build this voting system where users will vote for their favorite players and see their votes and that of other users in realtime.

Set up React project

First things first, let’s create our React project. I imagine you will be fairly familiar with this step, however, we’ll walk you through it nonetheless. Open a terminal window and install the React CLI tool globally by running this command:

npm install -g create-react-app

Now, open another terminal window on your Desktop and run this commands respectively to create a new React application using the CRA tool we just installed:

 mkdir polling-app // create a new project folder
 
 cd polling-app // navigate into the new folder
 
 create-react-app my-app // create a new react project called my-app
 
 cd my-app // navigate into the new react project
 
 npm start // start the development server.

When you visit your default browser on localhost:3000, you should see your project live on the browser.

Now you can go ahead and open the project in your favorite code editor and we can start writing some code. Before we jump into it, let’s take a moment to understand our app.

Since, we are building a voting system, we’ll need a custom component where we’ll render our players and have users cast votes for them. Also we’ll define the mock data for our players in the App component where we'll equally handle server-client communications.

Finally we'll have a server file where we'll subscribe to Scaledrone and dispatch votes to all connected users in realtime. That said, let's get started.

Set up a Node server

Now that we’ve created the project, let’s first create our Node server before we dive into the app itself. What we want, basically, is to send a vote (the name of a player) to our server via a POST request, the server receives the vote and publishes it to the room where all subscribed users will see the result.

Install Scaledrone

To install Scaledrone to our application, open a terminal in the project root directory and run the following npm command:

npm install scaledrone-node-push --save

This will make Scaledrone available in our node_modules folder so that we can require it in our Node server. Since, we are here, let's install the other packages we'll need to build our server

npm install express body-parser axios cors --save

Next, let’s create our server. First, create a .env file to store our environment variables In the project root directory, then set it up like so:

//.env

CHANNEL_ID = YOUR_CHANNEL_ID
SECRET_KEY = YOUR_CHANNEL_SECRET

Note: You will replace the YOUR_CHANNEL_ID and YOUR_CHANNEL_SECRET placeholders in the file above with the real values from the your Scaledrone dashboard.

To set up the Node server, create a server.js file in the projects root directory and update it with the code below:

//server.js

require("dotenv").config();
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
const port = 4000;
const Scaledrone = require("scaledrone-node-push");
CHANNEL_ID = process.env.CHANNEL_ID;
CHANNEL_SECRET = process.env.SECRET_KEY;
const sd = new Scaledrone({
  channelId: CHANNEL_ID,
  secretKey: CHANNEL_SECRET
});
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});
app.post("/vote", (req, res) => {
  const { body } = req;
  const room = "live-votes";
  const response = { playerId: body.vote.player_id };
  const message = response.playerId;
  sd.publish(room, message, error => {
    if (error) {
      console.log(error);
    } else {
      res.json({
        player_id: body
      });
    }
  });
});
app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

Let’s walk through it. Here we created a new instance of Scaledrone with the ChannelID and SecretKey gotten from the Scaledrone dashboard as we’ll demonstrate along the way. Then we defined a /vote route to process our votes when the client makes a POST request to that endpoint with the name of a player to vote for.

Finally when the server receive the request, we publish the vote in the Scaledrone room we named live-votes. On the client, we’ll subscribe to the same room and listen for the events which when recieved, we’ll update the playerDetails object with the new vote for all connected users to see in realtime.

Set up players component

With the server set, let’s continue hooking up the client. In the project root src folder, create a new folder called components, inside it, create a new component called players.js and set it up like so:

//src/components/players

import React, { Component } from 'react';
class Player extends Component {
    handleClick = () => {
    // coming soon ... 
    }
    render() {
        return (
            <div className="App">
                <img className="rounded-circle" src={this.props.image} alt="player" />
                <div className="mt-2">
                    <h5 className="card-title">{this.props.name}</h5>
                </div>
                <h5>Goals: {this.props.goals} </h5>
                <div>
                    <h2> Votes: {this.props.votes} </h2>
                </div>
                <div className="mb-3">
                    <button type="button" onClick={this.handleClick} className="btn btn-primary btn-lg">Vote For {this.props.name}</button>
                </div>
            </div>
        );
    }
}
export default Player;

Here, we have defined a template for our app UI. However, the values of these view elements are not present at the moment since we’re passing them into the players component from the App component via props. Let’s now set up the App component to update the players component with props.

Set up App component

To display the data we have defined for the UI elements in the players component, let’s open our App component and update it with the mock data we prepared for this project like so:

//src/App.js

import React, { Component } from "react";
import "./App.css";
import Player from "./components/players";
import cr7 from "../src/img/ronaldo.jpg";
import lm10 from "../src/img/lm10.jpg";
import pogba from "../src/img/paul.jpg";
const playerData = [
  {
    name: "Ronaldo",
    goals: 30,
    votes: 0,
    id: 1,
    image: cr7
  },
  {
    name: "Messi",
    goals: 8,
    votes: 0,
    id: 2,
    image: lm10
  },
  {
    name: "Pogba",
    goals: 26,
    votes: 0,
    id: 3,
    image: pogba
  }
];
class App extends Component {
  state = {
    playerDetails: []
  };
  componentDidMount() {
    this.setState({ playerDetails: playerData });
  }
  render() {
    return playerData.map(player => (
      <Player
        key={player.id}
        name={player.name}
        goals={player.goals}
        image={player.image}
        votes={player.votes}
        id={player.id}
      />
    ));
  }
}
export default App;

Notice that we added images locally to the project. Feel free to do the same, create a folder img inside the src folder and add your favorite player images to it, or simply reuse the sample images we used on this project, you can get it from the project repository.

Next, you may have noticed the Bootstrap classes on our view elements, let’s add the Bootstrap CDN to install Bootstrap and beautify the UI. Navigate to the project public folder and open the index.html file, add the CDN inside the documents <head> tag:

// public/index.html

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

At this point, if you save and reload the browser, you should get the exact app UI as shown below:

At the moment the app is stale. Nothing interesting happens on the app as of yet when you click a button to cast a vote for any player. Talking about votes, let’s get on with.

Set up Scaledrone

Before we dive into the process of casting votes, let’s first, visit the Scaledrone sign up page and create a Scaledrone account and get our credentials since we’ll need it for the next step.

Once you’ve signed up, you’ll be required to create a channel. Creating a channel will give you access to the channels credentials like the ChannelID and Secret_key that we’ll use to establish connection to Scaledrone via our app.

Next we’ll create the channel. Click the button and provide a channel name

For now we’ll just provide the channel name and keep the defaults. In production you will have to properly authenticate your channels and manage user privileges however, we are only building for demonstration purposes so we can skip that for now.

Finally when we create the channel, we’ll have access to this credentials. Keep them handy as we’ll be using them shortly. Also copy them into the server.js file we created at the begining and replace the CHANNELID and SECRET_KEY placeholders respectively. Now that we have successfully set up our Scaledrone credentials, let’s go back to our app and add some interactivity.

Add Scaledrone JavaScript CDN

Finally to interact with Scaledrone from the client, open the public/index.html file again and add the Scaledrone CDN to the <head> tag like so:

  // public/index.html
  
 <script src='https://cdn.scaledrone.com/scaledrone.min.js'></script>

Sending votes

So far we have a bare template with our players, their details and a button to cast a vote for them. Let’s hook up the buttons to send the votes to the server.

First, update the handleClick() function in the player component like so:

   // src/components/players.js
   
    handleClick = () => {
         this.props.onVoteCasted(this.props.name)
    }

Then in the App component, let’s define an event handler that will get the name of the player we are voting for from the players component and use Axios to post that player to the server. In the App.js file, add this code:

 // src/App.js

import axios from 'axios'; // import axios
  ...
  // below componentDidMount() and before render(), add handleEvent
  
  handleEvent = playerId => {
    const vote = { player_id: playerId };
    axios.post("http://localhost:4000/vote", { vote }).then(response => {
      console.log(response);
    });
  };
  ...

Here, the playerId variable is the name of the player the user is voting for. Once the user has clicked on a particular players vote button, the playerId variable will pass the name of the player to the handleEvent() callback function which will then post the player’s name to the server.

Next, Let’s add the onVotecasted props to the render() method to hook up the handleEvent() function here with handleClick() in the players component. Update the render() method like so:

 render() {
    return playerData.map(player =>
      <Player
        key={player.id}
        name={player.name}
        goals={player.goals}
        image={player.image}
        votes={player.votes}
        id={player.id}
++      onVoteCasted={this.handleEvent} // add this line
      />);
  }

Receiving votes

When the server receives the player to be voted for, it publishes the name in the live-votes room. On the client, we listen for the event. In the App.js file, create a constructor and update it with the code below:

// In App.js, before componentDidMount(), add the constructor

  constructor() {
    super();
    this.drone = new window.Scaledrone('vIh5lXOnewFxNIeC');
    this.drone.on('open', error => {
      if (error) {
        return console.error("Error");
      }
    })
    const room = this.drone.subscribe('live-votes');
    room.on('data', (data) => {
      this.state.playerDetails.map(player => {
        if (player.name === data) {
          return Object.assign({}, player, {
            votes: player.votes += 5
          });
        } else {
          return player;
        }
      });
      this.setState({
        playerDetails: this.state.playerDetails
      });
    });
  }

This is how we listen for the event on the room and update the playerDetails object with the new vote. First, we created a new Scaledrone instance globally with the channelID. Then we subscribed to the live-votes room to listen for an incoming message. When the message (players name) comes in from the server, we update the players votes by 5 counts and all connected users will see the update in realtime.

Demo
Now start the server (be sure to have added your Scaledrone credentials) by running this command in a terminal window on the project root directory:

 node server

Then try out the application, you should get the same exact functionality.

Wonderful, the app works as expected!. But that's not all, let's authenticate

Authentication

In a real word application, it’ll make sense to manage user access to the voting channels. Take for instance, in our voting application, we can make the system a bit less hackable by authenticating the voters and managing their access to the voting room.

We will implement JWT authentication in our app. Basically we want to determine when users can either subscribe or publish to our voting room.

That said, let’s jump in. To implement this feature in our existing application, this is what we’ll do:

• First, create a new channel on your Scaledrone dashboard and set the Authentication field to 'always require authentication':

• Next copy the keys of this new channel into your project, replace it with the existing keys from the previous channel in both your App.js file and server.js file. Then run the app again, you’ll notice that you can’t send votes. That’s because you can only communicate with the channel as an authenticated user, which at the moment you’re not. So let’s get you authenticated.

• Install JSON web token. Navigate back to your project root directory and run

  npm install --save jsonwebtoken

• When a user connects to a Scaledrone room, in our case the “live-votes” room, a unique clientId is assigned. We’ll retrieve and send this clientId to the server and then use it to generate a token. The token will contain the users permissions which will determine wether the user can publish or subscribe to the room. So in your App.js file, update your constructor like this:

  //src/App.js
  
  constructor() {
    super();
    this.drone = new window.Scaledrone("w4BKWxiW6yzeGrN3");
    this.drone.on("open", error => {
      if (error) {
        return console.log(error);
      }
      const user = { clientId: this.drone.clientId };
      axios.post("http://localhost:4000/auth", { user })
        .then(response => response.data)
        .then(jwt => this.drone.authenticate(jwt));
    });
    this.drone.on("authenticate", error => {
      if (error) {
        return console.error(error);
      }
      console.log("Authenticated");
     });
    const room = this.drone.subscribe("live-votes");
    room.on("data", data => {
      this.state.playerDetails.map(player => {
        if (player.name === data) {
          return Object.assign({}, player, {
            votes: (player.votes += 5)
          });
        } else {
          return player;
        }
      });
      this.setState({
        playerDetails: this.state.playerDetails
      });
    });
  }
  

This will send the user’s unique id to the server and use the returned token to authenticate the user. To hook up the server functionality, go ahead and add this route to your server.js file:

//src/server.js
const jwt = require('jsonwebtoken');
...
app.post('/auth', function(req, res) {
  const { body } = req;
  const userId = body.user.clientId
  if (hasChannelAccess(userId)) {
    const payload = {
      client: body.user.clientId,
      channel: CHANNEL_ID,
      permissions: {
        '^live-votes$': {
          publish: true,
          subscribe: true,
        },
      },
      exp: Math.floor(Date.now() / 1000) + 60 * 3 // token epires in 3 minutes
    };
    const token = jwt.sign(payload, CHANNEL_SECRET, {algorithm: 'HS256'});
    res.status(200).end(token);
  } else {
    res.status(403).end('Sorry! You are not allowed.');
  }
});
function hasChannelAccess(req) {
  // Your should implement your own authentication code here.
  // You could query your user from your database and see if they are allowed to
  // connect or give them user-scoped access using JWT permissions
  return true;
}

Here, we defined the payload, gave publish and subscribe permissions to the user, generated a minute token for the user and sends it back to the client. This is exactly the functionality we wanted. At this point, when you run your server and reload the app, you should now be able to cast votes as you did before.

If we wanted to allow the users to subscribe to the live-votes channel but not publish votes into it, all we have to do is update the permissions object in our payload like so:

permissions: {
        '^live-votes$': {
          publish: false,
          subscribe: true,
        }
}

With this, you can authenticate and manage users access to your application’s channels.

Conclusion

Scaledrone is a realtime service provider that powers both mobile and web applications alike. In this application we have leveraged its capabilities to build an extendable realtime voting platform for the web and equally discussed a few React tips along the way. There’s so much you can do with Scaledrone and this project is just one of many. Feel free to look through the documentation for more. If you will like to get your hands on the project source code, visit the project repository.

Tutorial updated and completely rewritten 3. September 2023.

Check out the live example 🚀. As well as the full source code on GitHub 👩🏽‍💻.

Adding chat functionality to web apps may have been a nice-to-have option in the past, but now it's a modern-day necessity. Imagine having an online marketplace, a social network, or a collaboration tool without the ability to chat in real-time. It's like having a phone without the call feature; it just doesn't cut it.

Picture this: a user is browsing your web app and wants to share something with their friend. With chat, they don't need to break their engagement stride by exiting the app. Instead, they can have real-time communication within the same platform.

In this tutorial, we'll show you how you can achieve that. We'll build a React.js chat application using the Scaledrone, a real-time messaging API which makes building chat rooms a breeze. The app will work similarly to apps like Messenger, WhatsApp or Telegram.

By the end, this is what our React chat app will look like:

Aside from sending text messages to a web service, it will feature showing avatars and usernames, chat message bubbles, a list of online members, as well as a typing indicator.

We'll achieve this using modern React web app best practices, including using Next.js, functional components and React Hooks.

And here's the bonus: this app will also be cross-platform compatible with our iOS and Android chat tutorials. Let's go!

Setting Up a React Chat App

We'll start by creating a new React app using Next.js, an easy tool to get started with React projects.

To use Next.js and React, you need Node.js. Follow the instructions on the link to install if you haven't already. Once that's sorted, creating our starter app becomes a breeze. Open Terminal and navigate to a folder where you'd like your app to exist. Type in the following command:

npx create-next-app --example https://github.com/ScaleDrone/react-chat-tutorial/tree/starter app-name
cd app-name

Note: The app-name can be anything you like.

This command will download starter code with an empty React app to make this tutorial easier to follow. The starter code includes an empty App component and CSS to make your app look nice.

Open the newly created app-name folder in your favorite editor. Now we can dive in for real.

Showing Chat Messages Using React Components

We'll use three main components to make our chat app.

1. A Home component which will manage sending and receiving messages and rendering the inner components.
2. A Messages component which will be a list of messages.
3. An Input component with a text field and button so that we can send our messages.

create-next-app has already made a Home component for you in src/pages/index.js, and we'll modify it later. But first, we'll create a Messages component.

Create a new file in your src/components folder called Messages.js. Create a new component in this file called Messages like in the following code:

import {useEffect, useRef} from 'react';
import React from 'react';
import styles from '@/styles/Home.module.css'

export default function Messages({messages, me}) {
  const bottomRef = useRef(null);
  useEffect(() => {
    if (bottomRef && bottomRef.current) {
      bottomRef.current.scrollIntoView({behavior: 'smooth'});
    }
  });
  return (
    <ul className={styles.messagesList}>
      {messages.map(m => Message(m, me))}
      <div ref={bottomRef}></div>
    </ul>
  );
}

The component will receive the messages it should display as a prop from the Homecomponent. We'll render a list containing each message. The list items themselves will contain the sender's name and avatar, as well as the text of the message.

Looking at the code, you might be wondering what the useEffect function and bottomRef variables are.

When a new message comes in, you don't want to waste time scrolling through a sea of previous messages to the bottom of the chat each time. Instead, your app should automatically scroll down to the latest message whenever a new one pops in. You can do that with bottomRef, a reference to an empty div below the latest message.

The way you do this in React is with the useEffect function. With it, you register a function that gets called each time the component is rendered. In the function, you tell React to scroll down to the previously mentioned div, effectively scrolling all the way to the last message.

Messages returns a list of Message components, which is not yet implemented. So, our next step is implementing it by adding the following code to the bottom of the file:

function Message({member, data, id}, me) {
  // 1
  const {username, color} = member.clientData;
  // 2
  const messageFromMe = member.id === me.id;
  const className = messageFromMe ?
    `${styles.messagesMessage} ${styles.currentMember}` : styles.messagesMessage;
  // 3
  return (
    <li key={id} className={className}>
      <span
        className={styles.avatar}
        style={{backgroundColor: color}}
      />
      <div className={styles.messageContent}>
        <div className={styles.username}>
          {username}
        </div>
        <div className={styles.text}>{data}</div>
      </div>
    </li>
  );
}

This will render the JSX for each individual message as follows:

1. Each message is linked to a specific member (user), and every member is identified by an ID, username, avatar, and a personalized color.
2. Next, you check whether the message came from you or another user. This distinction is helpful because it allows us to display our own messages on the left side.
3. Finally, you construct JSX for the component. The JSX shows the user's avatar, their name, and the message's content, all stored inside the passed arguments.

Now that we have the Messages component, we need to make sure the Home component actually renders it. Head over to src/pages/index.js and add an import of the Messages component to the top of the file:

import Messages from '@/components/Messages'

Earlier, we mentioned that we would show usernames and avatars in our app. Typically, you would have a login screen where you would get this information.

However, for the sake of this tutorial, we'll generate random names and colors for the avatars. You can do this by adding the following top-level functions to the top of the file:

function randomName() {
  const adjectives = [
    'autumn', 'hidden', 'bitter', 'misty', 'silent', 'empty', 'dry', 'dark',
    'summer', 'icy', 'delicate', 'quiet', 'white', 'cool', 'spring', 'winter',
    'patient', 'twilight', 'dawn', 'crimson', 'wispy', 'weathered', 'blue',
    'billowing', 'broken', 'cold', 'damp', 'falling', 'frosty', 'green', 'long',
    'late', 'lingering', 'bold', 'little', 'morning', 'muddy', 'old', 'red',
    'rough', 'still', 'small', 'sparkling', 'shy', 'wandering',
    'withered', 'wild', 'black', 'young', 'holy', 'solitary', 'fragrant',
    'aged', 'snowy', 'proud', 'floral', 'restless', 'divine', 'polished',
    'ancient', 'purple', 'lively', 'nameless'
  ];
  const nouns = [
    'waterfall', 'river', 'breeze', 'moon', 'rain', 'wind', 'sea', 'morning',
    'snow', 'lake', 'sunset', 'pine', 'shadow', 'leaf', 'dawn', 'glitter',
    'forest', 'hill', 'cloud', 'meadow', 'sun', 'glade', 'bird', 'brook',
    'butterfly', 'bush', 'dew', 'dust', 'field', 'fire', 'flower', 'firefly',
    'feather', 'grass', 'haze', 'mountain', 'night', 'pond', 'darkness',
    'snowflake', 'silence', 'sound', 'sky', 'shape', 'surf', 'thunder',
    'violet', 'water', 'wildflower', 'wave', 'water', 'resonance', 'sun',
    'wood', 'dream', 'cherry', 'tree', 'fog', 'frost', 'voice', 'paper', 'frog',
    'smoke', 'star'
  ];
  const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
  const noun = nouns[Math.floor(Math.random() * nouns.length)];
  return adjective + noun;
}

function randomColor() {
  return '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16);
}

As we've said, each user will have a username and color. The usernames are generated by adding a random adjective to a noun, leading to cool-sounding names like "hiddensnow" or "wanderingfrog". The colors are assigned by generating a random hex number.

Now that we have those functions, we can use them to set our initial state in the Home component. Add the following to the top of Home:

const [messages, setMessages] = useState([{
  id: '1',
  data: 'This is a test message!',
  member: {
    id: '1',
    clientData: {
      color: 'blue',
      username: 'bluemoon',
    },
  },  
}]);
const [me, setMe] = useState({
  username: randomName(),
  color: randomColor(),
});

For the time being, our initial state will be one test message from a mysterious hard-coded user called bluemoon. As for our own identity, we'll use a randomly generated name and color.

Next, update the return by adding the following inside the <div className={styles.appContent}> tag:

<Messages messages={messages} me={me}/>

This will allow you to display a list of chat messages, using the component you created earlier.

Run the app by navigating to the project folder in Terminal and typing in:

npm run dev

Head over to localhost:3000 and take a look at the first message in your chat app!

Adding a Text Field Input

Now that we have a way to display our messages, we need a way to type them! You'll create a new React component called Input that contains a text field and a send button. The component itself won't send any messages, but will call a callback whenever someone clicks the send button.

Create a new file in the src/components folder called Input.js. In this file, add a new component called Input:

import React from 'react';
import { useEffect, useState } from 'react';
import styles from '@/styles/Home.module.css'

export default function Input({onSendMessage}) {
  const [text, setText] = useState('');

This component will have a text field to enter the message along with a button to send it. We'll keep track of the currently entered text in our state. Continue writing the component:

function onChange(e) {
  const text = e.target.value;
  setText(text);
}

This will trigger a render each time there's a change in the text field. Next, we need to handle sending the message, so add the following inner function:

function onSubmit(e) {
  e.preventDefault();
  setText('');
  onSendMessage(text);
}

To send the message, we'll use a callback inside the component's props which we'll receive from Home. We don't want the app to refresh every time a new message is sent, so we'll prevent the default behavior. We'll also update the state so that we clear the textfield.

Finally, it's time to connect the functions with the state and render everything using JSX:

  return (
    <div className={styles.input}>
      <form onSubmit={e => onSubmit(e)}>
        <input
          onChange={e => onChange(e)}
          value={text}
          type='text'
          placeholder='Enter your message and press ENTER'
          autoFocus
        />
        <button>Send</button>
      </form>
    </div>
  );
}

Now Input is all done!

Just like we did with Messages, we need to make sure App will render Input. Head over to src/components/index.js and add the import for your new component to the top of the file:

import Input from '@/components/Input'

Next, update the contents of the render method to show the Input component:

<Messages messages={messages} me={me}/>
<Input
  onSendMessage={onSendMessage}
/>

Notice that you pass a callback (onSendMessage) to Input. Input will call this each time the user presses the send button. Finally, you'll implement that callback to "send" a message. Add the following function just above the return statement:

function onSendMessage(message) {
  const newMessage = {
    data: message,
    member: me
  }
  setMessages([...messages, newMessage])
}

For now, we'll just add it to the messages array in our state. Leter, we'll connect this to a web service to actually send messages back and forth.

If you head back to your web browser you should see an input field. Type in a message, hit Enter, and watch your message display in the list.

Look at this, your chat app is taking shape! Kudos to you!

Showing a List of Online Members

Before we connect everything to a web service, there is one more part of our chat UI that we'll tackle. In a group chat setting, it's useful to show a list of currently active users. We'll do that with a simple functional React component.

Create a new file in src/components called Members.js. There, you can add the following component:

import React from 'react';
import styles from '@/styles/Home.module.css'

export default function Members({members, me}) {
  return (
    <div className={styles.members}>
      <div className={styles.membersCount}>
        {members.length} user{members.length === 1 ? '' : 's'} online
      </div>
      <div className={styles.membersList}>
        {members.map(m => Member(m, m.id === me.id))}
      </div>
    </div>);
}

This is a simple, stateless component that takes a list of members and the current member. Using those two pieces of data, it renders a list of Member components, which you'll add to the bottom of the file:

function Member({id, clientData}, isMe) {
  const {username, color} = clientData;
  return (
    <div key={id} className={styles.member}>
      <div className={styles.avatar} style={{backgroundColor: color}}/>
      <div className={styles.username}>{username} {isMe ? ' (you)' : ''}</div>
    </div>
  );
}

This component shows the member as text, adding "(you)" to the end of the text if it's the current user's username.

Next, we'll show this component from src/pages/index.js. Head on over there and add a new import to the top of the file:

import Members from '@/components/Members'

Next, add a new state variable right after where [messages, newMessage] are declared:

const [members, setMembers] = useState([{
  id: "1",
  clientData: {
    color: 'blue',
    username: 'bluemoon',
  },
}]);

This state variable will keep track of active members. For now, we'll hard-code a member. We'll fetch them from a web service in the next section.

Finally, add your new component to the JSX, right above Messages:

<Members members={members} me={me}/>
<Messages messages={messages} me={me}/>

Run the app again and you'll see bluemoon in the list of chat members!

Now, let's roll up our sleeves and connect everything to a real web service using Scaledrone.

Connecting to Scaledrone

Initially, the idea of crafting a chat application that smoothly shuttles messages in real-time might seem a tad intimidating. Thankfully, Scaledrone steps in to streamline the business logic behind developing a chat app.

Before we dive into its usage, though, we have to ensure that Scaledrone is part of our app. Here's how.

Open src/pages/index.js. Inside the JSX head tag, add the following line to the bottom of the tag:

<script type='text/javascript' src='https://cdn.scaledrone.com/scaledrone.min.js' />

Note: If you are using a plain index.html file, simply add the same script tag inside the head tag in the file.

This will make sure Scaledrone's code is included in our app. We're almost ready to start using it, but we need to do one more thing first: create a Scaledrone channel.

To successfully connect to Scaledrone, you need to get your own channel ID from Scaledrone's dashboard. If you haven't already, head over to Scaledrone.com and register an account. Once you've done that, go to your dashboard and click the big green +Create Channel button to get started. You can choose Never require authentication for now. Note down the channel ID from the just created channel, you'll need it in a bit.

Head back to index.js. We'll add a function to connect to Scaledrone, but first we need to do a bit of prep work.

Add a new top-level object to the file:

let drone = null

We'll use this variable to store a global Scaledrone instance that we can access in the component.

Next, Scaledrone will need access to the current state, including messages, members and the current user. To allow this, we'll create a reference using useRef to each of those objects. Add the following code right below the definition of [me, setMe]:

const messagesRef = useRef();
messagesRef.current = messages;
const membersRef = useRef();
membersRef.current = members;
const meRef = useRef();
meRef.current = me;

This creates references to messages, members and the current user. It also makes sure the references are updated during each render. Now, we can use these references when we are processing Scaledrone events.

Add a new function to the top of the component to connect to Scaledrone:

function connectToScaledrone() {
  drone = new window.Scaledrone('YOUR-CHANNEL-ID', {
    data: meRef.current,
  });
  drone.on('open', error => {
    if (error) {
      return console.error(error);
    }
    meRef.current.id = drone.clientId;
    setMe(meRef.current);
  });
}

This will create a new instance of Scaledrone. Just remember to replace the string with the channel ID you got earlier. Since we're loading the script inside our HTML head tag, the script's contents will be attached to the global window object. That's where we'll ultimately fetch our Scaledrone instance from.

We'll also pass Scaledrone the data for the currently logged-in member. If you have additional data about the user or the client, this is a good way to supply that data, instead of having to send it with each message.

Moving on, we need to connect to a room. A room is a group of users that we can send messages to. You listen to those messages by subscribing to a room of a specific name. Add the following code to the end of the function you just created:

const room = drone.subscribe('observable-room');

We'll subscribe to a room.

Note: You might have noticed that we named our name Scaledrone room observable-room. You can name the room anything you want, a single user can actually connect to an infinite amount of rooms for all sorts of application scenarios. However, in order for messages to contain the info of the sender, you need to prefix the room name with "observable-". Read more...

We also need to know when the messages arrive, so we'll subscribe to the "message" event on the room. Add the following code to the end of the constructor:

room.on('message', message => {
  const {data, member} = message;
  setMessages([...messagesRef.current, message]);
});

When we get a new message, we'll add the message's text as well as the client data to our state.

Similarly, we need to track the logged-in members:

room.on('members', members => {
  setMembers(members);
});
room.on('member_join', member => {
  setMembers([...membersRef.current, member]);
});
room.on('member_leave', ({id}) => {
  const index = membersRef.current.findIndex(m => m.id === id);
  const newMembers = [...membersRef.current];
  newMembers.splice(index, 1);
  setMembers(newMembers);
});

Scaledrone gives us the logged-in members when we join and then keeps us updated when someone else joins or leaves. We'll make sure to keep our state variables updated with the correct members.

Now you just need to make sure the function is called when the component loads. Add this code right below the function definition:

useEffect(() => {
  if (drone === null) {
    connectToScaledrone();
  }
}, []);

You can do a small check to make sure Scaledrone is not already connected and then call the function.

Next, we need to modify onSendMessage to publish a new message to all the other users in the room:

function onSendMessage(message) {
  drone.publish({
    room: 'observable-room',
    message
  });
}

Scaledrone makes this a simple matter of calling the publish function with the data.

Finally, we'll remove the test message from our app's state so that the initial state looks like the following:

const [messages, setMessages] = useState([]);
const [members, setMembers] = useState([]);
const [me, setMe] = useState({
  username: randomName(),
  color: randomColor(),
});

If you switch to your web browser at this point, you'll notice that the behavior remains the same: when you send a new message, it should appear in the list. The difference is that this time it's actually being sent to Scaledrone. Feel free to open the app in another tab and chat with yourself. :)

Adding a Typing Indicator

When you use a chat app, you want to know what's happening on the other side of the conversation. Has the person you're talking to read your message? Are they typing a reply? These are some of the questions that chat apps can answer with features like ‘seen’ confirmation, typing indicator, and more.

Fear not; Scaledrone makes this a walk in the park. Let's see how it's done.

Creating a React Typing Indicator Component

As you can assume, we'll now add a typing indicator. Ours will display a message like "hiddenstar is typing."

The first step includes creating a new React component dedicated to these subtle yet informative dots. To begin, create a new file in src/components called TypingIndicator.js. Then, add the following code:

import React from 'react';
import styles from '@/styles/Home.module.css'

export default function({members}) {
  // 1
  const names = members.map(m => m.clientData.username);
  if (names.length === 0) {
    return <div className={styles.typingIndicator}></div>;
  }
  // 2
  if (names.length === 1) {
    return <div className={styles.typingIndicator}>{names[0]} is typing</div>;
  }
	// 3
  const string = names.slice(0, -1).join(', ') + ' and ' + names.slice(-1);
  return <div className={styles.typingIndicator}>{string} are typing</div>;
}

This component adds a small div that gets filled with text when someone is typing. You will pass a list of users that are currently typing to this component. Here's how it works:

1. First, you get a list of usernames of all the members that are currently typing. If nobody is typing, an empty div without any text is returned.
2. If one person is typing, the div portrays their action, like "mysteriousrabbit is typing."
3. In case more people are typing, their names are joined using a comma as a separator. The text then reads something like: "mysteriousrabbit, coolfrog and bluecar are typing."

Now that we have the component, we need code to show it on the website. Open src/pages/index.js and import your new component at the top of the file:

import TypingIndicator from '@/components/TypingIndicator'

Next, you have to modify the JSX to show the typing indicator right under the Messages component, like so:

<Messages messages={messages} me={me}/>
<TypingIndicator members={members.filter(m => m.typing && m.id !== me.id)}/>
<Input
  onSendMessage={onSendMessage}
  onChangeTypingState={onChangeTypingState}
/>

The code above shows the new component and passes it a list of users that are typing by checking the typing property.

Your web app will now show a textual sign whenever a user is composing a message.

Tracking if the User is Currently Typing

However, at this moment, the typing state of users is not being tracked. The situation isn't as clear as merely typing/not typing, either.

People might start typing a message and then suddenly get distracted—like deciding to make themselves a cup of coffee—leaving the message halfway written. On the flip side, if you trigger the typing indicator each time someone takes a moment to find the perfect emoji, well, that might just annoy your users.

And here is where Scaledrone and its optional library called Typing Indicator step in to handle all of this for you.

Note: While Typing Indicator is created by and for Scaledrone, it is framework-agnostic and works with any JavaScript application or website.

To install typing indicator, navigate to the project folder in Terminal and type in:

npm i typing-indicator

This little command will install the library.

You'll track the typing state from src/components/Input.js, so navigate there and import the library at the top of the file:

import TypingIndicator from 'typing-indicator';

let typingIndicator = null;

You also create a top-level variable to hold an instance of the typing indicator, accessible across re-renders of the component.

Next, change the definition of Input to include a new parameter:

export default function Input({onSendMessage, onChangeTypingState}) {

onChangeTypingState is a callback that you'll define in index.js, but Input will call it when the current user changes their typing state.

Then, you'll add a new typing indicator when the component loads by adding the following code inside the component, right below where the state is declared:

useEffect(() => {
  if (typingIndicator === null) {
    typingIndicator = new TypingIndicator();
    typingIndicator.listen(isTyping => onChangeTypingState(isTyping));
  }
}, []);

When this component loads, you will register a callback to get called whenever a user begins or stops typing.

Next, we need to tell the typing indicator when the text changes, so update onChange to the following:

function onChange(e) {
  const text = e.target.value;
  typingIndicator.onChange(text);
  setText(text);
}

The typing indicator does the heavy lifting of tracking typing states for you.

All you need to do is connect it to a function, which, in this case, is onChangeTypingState.

Now, let's wrap things up in src/pages/index.js by passing the callback in. Navigate there and, first, import your new component at the top of the file:

import TypingIndicator from '@/components/TypingIndicator'

Then, modify the Input declaration inside the JSX to the following:

<TypingIndicator members={members.filter(m => m.typing && m.id !== me.id)}/>
<Input
  onSendMessage={onSendMessage}
  onChangeTypingState={onChangeTypingState}
/>

Alongside showing your new component with members that are currently typing, this will ensure that Input calls onChangeTypingState, which you'll implement next.

Sending and Receiving the Typing State

Right now, you are passing onChangeTypingState to Input but you haven't yet created the function. The function needs to send a message to Scaledrone, letting other users know that the current user is typing.

To continue, add the following function above the return statement:

function onChangeTypingState(isTyping) {
  drone.publish({
    room: 'observable-room',
    message: {typing: isTyping}
  });
}

onChangeTypingState receives a boolean that indicates whether the user is typing or not. Using Scaledrone, you'll publish a new message with the updated typing state whenever it changes.

Next, we need to process the incoming typing messages and show the typing indicator. You'll do this in the connectToScaledrone. Modify the call to room.on('message', ...) to the following:

room.on('message', message => {
  const {data, member} = message;
  if (typeof data === 'object' && typeof data.typing === 'boolean') {
    const m = membersRef.current.find(m => m.id === member.id);
    m.typing = data.typing;
    setMembers(membersRef.current);
  } else {
    setMessages([...messagesRef.current, message]);
  }
});

Here's the breakdown of what this code does:

The incoming message type is checked. If the message is about a typing state, the code finds the members that are typing and changes their typing property to what was passed in the message. If the message isn't about typing, it's treated as a regular message and added to state.messages.

So, with these changes, you can track the typing state of users and send it to Scaledrone. When you receive a typing message from Scaledrone, you will set the typing property on the user. As the last step, the TypingIndicator component will read that state and show a typing indicator for those users for whom typing is true.

Head back to your browser to see the typing indicator in action!

And We're Done!

And voilà! You've just built your very own React chat app, and with the magic of Scaledrone, you've made it look easy. No more fussing over the backend—you got to focus on creating a sleek and functional user interface that's ready to impress.

With Scaledrone, you get to focus on making your UI beautiful, and on the functionality of your app, without worrying about the back end. You can find the full source code on GitHub.

Of course, there can be much more to your chat app. If you'd like to build on this app, consider these feature ideas to implement using Scaledrone's APIs:

• Sending images and attachments
• Authentication
• Replies to specific messages
• Stickers and GIFs

Sounds exciting, right?

And if you're ready to explore further, you can find the full source code or run the working prototype on GitHub. For any questions or feedback, feel free to contact us; we'd love to hear from you.

Today's cryptocurrency market is growing rapidly. Adding a real-time crypto tracker to your website could be beneficial. Not only could it attract new users, but it could also keep your current users engaged.

If you're a developer seeking to broaden your skills, this tutorial could be a valuable resource. It's not just about creating a real-time crypto tracker. You'll also learn how to incorporate charts into your application.

To make the most of it, I suggest you try coding along with the tutorial.

What are we going to build?

Let's first understand what we're aiming to create from today's tutorial.

Our app will feature two pages. The first page, our homepage, will showcase a list of today's trending coins. It will display seven coins, each with its image and market cap compared to Bitcoin.

Moreover, it will have a search option, allowing users to find any coin.

When a user clicks on a specific coin, they will be redirected to the second page. Here, they'll find comprehensive details about the chosen coin and three types of graphs. These graphs will show the coin's value over time.

This might seem challenging at first, but once you start working on it, you'll see how easy it can be. Now, let's explore the technologies we'll be using in this tutorial.

Technologies used

We're using React, a frontend library, to design our user interface.

React is a JavaScript library developed by Facebook. Its purpose is to build user interfaces. It allows developers to create reusable UI components. This makes building and maintaining complex user interfaces simpler. React's component-based design ensures efficient rendering of dynamic, interactive content.

In addition to React, we're using a special API called Coingeko API to fetch coin data. This API is a strong, user-friendly tool. Developers can use it to access cryptocurrency data. It provides real-time and historical information on various cryptocurrencies. This includes prices, market capitalization, and trading volumes. The API integrates easily into apps and services. Users can stay updated on the latest crypto market developments.

Lastly, we're using a library called ReCharts to create charts in our app. ReCharts is a simple, lightweight JavaScript library. Developers can use it to make attractive, interactive charts for web pages. It supports various chart types like line, bar, pie, and more. This lets you visualize data easily. With ReCharts, adding dynamic charts to your web apps is simple and hassle-free.

That's it for the technologies. Now, let's start building our application without any further delay.

Creating the React app and Installing the Dependencies

First of all, we need to create a React application for this project. You might have used 'create-react-app' to build React applications in the past. If that's the case, you're in for a treat with this tutorial because we'll be learning something new and improved. Instead of using 'create-react-app', we'll use Vite to build our React app. Vite offers several benefits over create-react-app. Those are

• Efficient Development Server: Vite includes its own development server, offering faster reloads and better performance.

• No Bundling during Development: Vite, unlike CRA, doesn't bundle code during development, enabling smoother and quicker development.

• Optimized Production Build: Vite uses Rollup for production builds, leading to smaller bundles and better loading times.

• Configurable: Vite provides more configuration options, giving experienced developers more control over their projects.

How to create a React application using Vite?

First, open up your terminal and type the following command:

npm create vite@latest

This will prompt a series of messages in your terminal.

Next, you'll need to provide a name for your project. Let's name it "frontend" (or choose any other name you prefer).

After naming your project, you'll be presented with several options. You can navigate through these options using the up and down arrow keys on your keyboard. Find "React" and press enter to create the application with React.

Next, you'll need to select "JavaScript". We are using ReactJs in this tutorial, so press enter to confirm your selection.

After the installation process, you'll be prompted to navigate to the newly created project folder and install all necessary dependencies for your React application.

To do this, first navigate to the "frontend" folder by typing the following command:

cd frontend

Then install the dependencies by typing

npm install

Once the installation is finished, type npm run dev and click on the provided link. This will take you to your new React application.

And that's it, we have now created the React application!

Installing the Dependencies

While the React application is running in the current terminal, let's open a new terminal to install all our dependencies.

Navigate to your terminal and type.

npm install react-router-dom axios sass zustand

• react-router-dom: This package allows navigation between different views and components in a single-page React application. It helps manage routes and handle different URLs.
• axios: Axios is a JavaScript library for making HTTP requests. It simplifies sending and handling asynchronous HTTP requests.
• sass: SASS, a CSS preprocessor, enhances CSS with features like variables, nested rules, and mixins. It aids in writing maintainable, organized CSS code for complex projects.
• zustand: Zustand is a state management library for React. It provides a simple, minimalistic approach to managing application state, reducing the need for complex setups.

Creating the folder structure

We won't be using the App.jsx, App.css, and index.css files. So, you can remove them from your 'src' folder.

We will have a 'components' folder to store all our components, a 'store' folder to manage our global states, and a 'pages' folder to organize our two pages.

Next, create a file named Home.js in the 'pages' folder. This will serve as our homepage, featuring the trending coins and other elements we discussed earlier.

Then well type rfc and press tab to create this code snippet.

import React from 'react';

export default function Home() {
  return (
    <div>
      Home
    </div>
  );
}

This is an extension in vs code that is really useful. The extension is called ES7+ React/Redux/React-Native snippets. Install it and you are good to go.

Then Let’s create the other page where there are the information and the charts related to a single coin.

Create a new file in pages and name it as Show.jsx. Go to the file and hit rfc then tab. You’ll end up with something like this.

import React from 'react';

export default function Show() {
  return (
    <div>
      Show
    </div>
  );
}

Creating Routes

Let's go to main.jsx and set up the routes for our application.

First, clear everything in main.jsx and paste the following code

import ReactDOM from "react-dom/client";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Show from "./pages/Show";

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/:id" element={<Show />} />
    </Routes>
  </BrowserRouter>
);

In this code, we've set up two routes for our application. If the route is 'http://localhost:5173/', the Home page will be displayed. If the route is 'http://localhost:5173/id', the Show page will be displayed. It's as simple as that.

Fetching Data from the CoinGecko API

In this step, we'll create a state store for our Home page using Zustand, a state management library. Zustand allows us to manage the states of our application globally. This means we can use and modify these states in any component across the application by simply importing the store.

In the context of our application, the state we are interested in is the list of trending coins, which we represent as an array of coin objects.

Start by creating a new file homeStore.jsx inside the 'store' folder and add the following code.

import { create } from "zustand";
import axios from "axios";

const homeStore = create((set) => ({
  coins: [],
  
  fetchCoins: async () => {
    const res = await axios.get("https://api.coingecko.com/api/v3/search/trending");
    const coins = res.data.coins.map((coin) => {
      return {
        id: coin.item.id,
        name: coin.item.name,
        image: coin.item.large,
        priceBtc: coin.item.price_btc.toFixed(10),
      };
    });
    
    console.log(coins);
    set({ coins });
  },
}));

export default homeStore;

As you can see our coins have properties such as name, image and price against BTC.

We also define an asynchronous function fetchCoins inside the store. This function is responsible for fetching the list of trending coins from the CoinGecko API and updating our coins state with the retrieved data.

Displaying Coins on the Home Page

Once we have our store set up, we can import it into Home.js and use the state and functions defined in the store.

Here is the updated Home.js code

import React, { useEffect } from "react";
import homeStore from "../store/homeStore";
import { Link } from "react-router-dom";

export default function Home() {
  const store = homeStore();

  useEffect(() => {
    store.fetchCoins();
  }, []);

  return (
    <div>
      {store.coins.map((coin) => {
        return (
          <div key={coin.id}>
            <div>{coin.name}</div>
          </div>
        );
      })}
    </div>
  );
}

In this code,

• We import homeStore and use it to get access to our coins state and fetchCoins function.

• Within a useEffect hook, we call fetchCoins. This ensures that fetchCoins is executed once when the component mounts, which fetches the list of trending coins from the API and updates our coins state.

• In the return statement of the component, we map over the coins array to display each coin's name on the page.

Implementing Search Functionality

In this section, we will add a search functionality to our application, allowing users to search for a specific cryptocurrency coin. The goal is to display the search results in real-time as the user types into the search bar. To avoid excessive API calls and enhance user experience, we'll implement a debounce function. This function will delay the execution of the search until the user has stopped typing for a certain period of time.

Creating the Debounce Function

A debounce function is used to prevent a particular function from being called immediately. Instead, it ensures the function only gets called after the user has stopped invoking the function for a specific amount of time. In our case, we will use this function to delay the API call until the user has stopped typing.

Create a new folder inside the 'src' folder named 'helpers', and create a new file inside it named 'debounce.js'. Add the following code in 'debounce.js'.

export default function debounce(func, wait, immediate) {
  var timeout;

  return function () {
    var context = this,
      args = arguments;

    var later = function () {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };

    var callNow = immediate && !timeout;

    clearTimeout(timeout);
    timeout = setTimeout(later, wait);

    if (callNow) func.apply(context, args);
  };
}

You can learn more about debounce functions online for a deeper understanding. For now, just know that it helps us limit the rate of execution of our search function.

Updating the Home Store

Let's update our homeStore.js file to include the search functionality.

import { create } from "zustand";
import axios from "axios";
import debounce from "../helpers/debounce"; 

const homeStore = create((set) => ({
  coins: [],
  trending: [],
  query: "",

  setQuery: (e) => {
    set({ query: e.target.value });
    homeStore.getState().searchCoins();
  },
  
  searchCoins: debounce(async () => {
    const { query, trending } = homeStore.getState();

    if (query.length > 2) {
      const res = await axios.get(
        `https://api.coingecko.com/api/v3/search?query=${query}`
      );
      const coins = res.data.coins.map((coin) => {
        return {
          name: coin.name,
          image: coin.large,
          id: coin.id,
        };
      });
      set({ coins });
    } else {
      set({ coins: trending });
    }
  }, 500),
  
  fetchCoins: async () => {
    const res = await axios.get(
      "https://api.coingecko.com/api/v3/search/trending"
    );  
    const coins = res.data.coins.map((coin) => {
      return {
        id: coin.item.id,
        name: coin.item.name,
        image: coin.item.large,
        priceBtc: coin.item.price_btc.toFixed(10),
      };
    });
    console.log(coins);
    set({ coins, trending: coins });
  },
}));

export default homeStore;

In this revised code, we've introduced two new state variables - trending and query. The former keeps track of the list of trending coins, while the latter captures the user's search input.

The setQuery function has been enhanced to not only take the user's input as an argument and update the query state but also to trigger the searchCoins function. The real magic happens in the searchCoins function, which is now enveloped by a debounce function with a 500 millisecond delay. This function checks the length of the user's search query. If the query is more than two characters, it sends an API request to fetch coins that match the query. On the contrary, if the query is two or fewer characters, it reverts the coins state back to trending, showing the trending coins.

Finally, the fetchCoins function has been updated to simultaneously set both coins and trending states with the fetched list of trending coins. This allows for the trending array to reset the coins array when needed.

Updating the Frontend

Finally, to tie the search functionality to the frontend, we need to update the input box in our component like this.

<input
  type="text"
  placeholder="Search"
  value={store.query}
  onChange={store.setQuery}
/>

Here, value={store.query} binds the input box's value to the query state in homeStore. When the value of the input box changes (i.e., the user types something), we call the store.setQuery function to update our query state and initiate a search.

Creating the Coin Info page

In this next phase, we aim to construct a page displaying detailed information about a chosen coin. This information will be available once a coin is clicked.

Constructing the showStore.jsx

To start, we'll create another store named showStore.jsx to handle data specific to this page. The following code will be included in this store.

import { create } from "zustand";
import axios from "axios";

const showStore = create((set) => ({
 graphData: [],
 fetchData: async (id) => {
   const [graphsRes, dataRes] = await Promise.all([
     axios.get(
       `https://api.coingecko.com/api/v3/coins/${id}/market_chart?vs_currency=usd&days=100&interval=daily&precision=2`
     ),
     axios.get(
       `https://api.coingecko.com/api/v3/coins/${id}?localization=true&tickers=true&market_data=true&community_data=true&developer_data=true&sparkline=true`
     ),
   ]);

   const graphData = graphsRes.data.prices.map((price) => {
     const [timeStamp, priceValue] = price;
     const date = new Date(timeStamp).toLocaleDateString("en-us");
     return {
       Date: date,
       Price: priceValue,
     };
   });

   console.log(dataRes);

   set({
     data: dataRes.data, // Set the fetched data to `store.data`
     graphData,
   });
 },
}));

export default showStore;

This page intends to display two types of data.

• A graph representing the coin's price over time

• Basic information about the selected coin

We need two API calls to retrieve this information. These requests are simultaneously made using Promise.all() to optimize loading time.

The fetchData function is responsible for making these API calls and storing the results in the graphData array and data object.

For the graph, we use the 'market_chart' endpoint to get price and date data. We then map over the graphsRes.data.prices array to transform the timestamp into a more readable date format and construct the graphData array.

Installing and Using Recharts

To render the charts on our page, we'll use a React chart library called Recharts. This can be installed by running the following command in your terminal.

npm install recharts

In our show.jsx page, we plan to show three different charts from which the user can choose to view any at a given time.

What is chackraUI and how to use it in our react app?

Chakra UI is a robust, user-friendly library of React components that can greatly enhance your React project. It provides a comprehensive set of customizable, accessible UI components that allow developers to quickly build beautiful and responsive user interfaces. Chakra UI emphasizes on accessibility, ensuring your web app is usable by all users, including those with disabilities. Let's discuss how to install and implement Chakra UI in your React project.

Installing Chakra UI

To install Chakra UI, open your terminal and type the following.

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Implementing Chakra UI in Your Project

After installing Chakra UI, it's time to incorporate it into your project. We need to wrap our entire application with the component. Here's an example of how to do this.

import ReactDOM from "react-dom/client";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Show from "./pages/Show";
import { ChakraProvider } from "@chakra-ui/react";  

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <ChakraProvider>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/:id" element={<Show />} />
      </Routes>
    </ChakraProvider>
  </BrowserRouter>
);

In the code snippet above, we imported ChakraProvider and wrapped the routes inside it. With this setup, you're ready to use Chakra UI's components in your project.

Working with the Tabs Component in Chakra UI

Here's an example of how to use the Tabs component in Chakra UI.

<Tabs>
  <TabList>
    <Tab>Line Chart</Tab>
    <Tab>Bar Chart</Tab>
    <Tab>Area Chart</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>one!</p>
    </TabPanel>
    <TabPanel>
      <p>two!</p>
    </TabPanel>
    <TabPanel>
      <p>three!</p>
    </TabPanel>
  </TabPanels>
</Tabs>;

In this example, the Tabs component contains multiple Tab and TabPanel components. Each Tab corresponds to a TabPanel.

Incorporating Graphs into the Tab Panels

To visualize the data, we can incorporate different types of charts within the TabPanel components. The following code snippet demonstrates how to do this.

import { useEffect } from "react";
import showStore from "../store/showStore";
import { useParams } from "react-router-dom";
import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
import {
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  LineChart,
  Line,
  Legend,
} from "recharts";

export default function Show() {
  const store = showStore();
  // to get the coin id from the url
  const params = useParams();

  useEffect(() => {
    store.fetchData(params.id);
  }, []);

  return (
    <div>
      <Tabs>
        <TabList>
          <Tab>Line Chart</Tab>
          <Tab>Bar Chart</Tab>
          <Tab>Area Chart</Tab>
        </TabList>

        <TabPanels>
          <TabPanel>
            <div className="width">
              <div className="show-graph">
                <ResponsiveContainer width="100%" height={300}>
                  <LineChart
                    width={500}
                    height={300}
                    data={store.graphData}
                    margin={{
                      top: 5,
                      right: 30,
                      left: 20,
                      bottom: 5,
                    }}
                  >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="Date" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Line type="monotone" dataKey="Price" stroke="#8884d8" />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </div>
          </TabPanel>

          <TabPanel>
            <p>two!</p>
          </TabPanel>

          <TabPanel>
            <p>three!</p>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </div>
  );
}

In this code, we use the useEffect hook to fetch data from the store, and display a Line Chart inside the TabPanel. Note that we set the data prop of LineChart to store.graphData, which is the data fetched from the store.

We can similarly add Bar and Area charts in the remaining TabPanel components.

<TabPanel>
  <div className="width">
    <div className="show-graph">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart
          width={500}
          height={300}
          data={store.graphData}
          margin={{
            top: 5,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="Date" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Bar dataKey="Price" fill="#8884d8" />
        </BarChart>
      </ResponsiveContainer>
    </div>
  </div>
</TabPanel>

<TabPanel>
  <div className="width">
    <div className="show-graph">
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart
          data={store.graphData}
          margin={{
            top: 10,
            right: 30,
            left: 0,
            bottom: 0,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="Date" />
          <YAxis />
          <Tooltip />
          <Area
            type="monotone"
            dataKey="Price"
            stroke="#8884d8"
            fill="#8884d8"
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  </div>
</TabPanel>

So the output will look like this.

Displaying Coin Details

After retrieving the data from the API and setting it in the store, we can access the necessary fields using store.data.. Here's an example of displaying various coin details int he show.js file.

<div className="show-details">
  <div className="width">
    <h2>Details</h2>
    <div className="show-details-row">
      <h4>Market Cap Rank</h4>
      <span>{store.data.market_cap_rank}</span>
    </div>
    <div className="show-details-row">
      <h4>24th High</h4>
      <span>${store.data.market_data.high_24h.usd}</span>
    </div>
    <div className="show-details-row">
      <h4>24th Low</h4>
      <span>${store.data.market_data.low_24h.usd}</span>
    </div>
    <div className="show-details-row">
      <h4>Circulating Supply</h4>
      <span>${store.data.market_data.circulating_supply}</span>
    </div>
    <div className="show-details-row">
      <h4>Current Price</h4>
      <span>${store.data.market_data.current_price.usd}</span>
    </div>
    <div className="show-details-row">
      <h4>1y Change</h4>
      <span>
        {store.data.market_data.price_change_percentage_1y.toFixed(2)}%
      </span>
    </div>
  </div>
</div>

This code will provide the following output.

We can also display the coin image and the coin name at the top of the page.

<header className="show-header">
  <img src={store.data.image.large} />
  <h2>
    {store.data.name} ({store.data.symbol})
  </h2>
</header>

In the code snippet above, store.data.image.large is the URL of the coin image, and store.data.name and store.data.symbol are the name and symbol of the coin, respectively. You willg et the following output from this code.

Making the Coin List Interactive

The focus of this section is on making the trending items list and the search list interactive. Specifically, we want to associate a link with each coin so that when clicked, the user is redirected to the relevant show.jsx page for that coin. This will require creating a new component which we'll name ListItems.jsx.

Creating the ListItems.jsx Component

Inside the components folder located in the src directory, let's create a new component, ListItems.jsx. Here's how the code looks.

import { Link } from "react-router-dom";

export default function ListItems({ coin }) {
  return (
    <div className="home-crypto">
      <Link to={`/${coin.id}`}>
        <span className="home-crypto-image">
          <img src={coin.image} />
        </span>
        <span className="home-crypto-name">{coin.name}</span>
        <span className="home-crypto-prices">
          <span className="home-crypto-btc">{coin.priceBtc} BTC</span>
          <span className="home-crypto-usd">{coin.priceUsd}$</span>
        </span>
      </Link>
    </div>
  );
}

In this component, we use the component from react-router-dom. The coin image is retrieved and displayed from . The coin name and prices (in both BTC and USD) are fetched and displayed using the and {coin.name} tags.

Incorporating ListItems Component into the Home View

The next step is to integrate this new ListItems component into the home.jsx file. Here's the updated code.

import { useEffect } from "react";
import homeStore from "../src/stores/homeStore";
import ListItems from "./components/ListItems";

export default function Home() {
  const store = homeStore();

  useEffect(() => {
    store.fetchCoins();
  }, []);

  return (
    <div>
      <header className="home-search">
        <div className="width">
          <h2>Search for a coin</h2>
          <div className="home-search-input">
            <input
              type="text"
              placeholder="Search"
              value={store.query}
              onChange={store.setQuery}
            />
          </div>
        </div>
      </header>
      <div className="home-cryptos">
        <div className="width">
          <h2> {!store.searched ? "Trending Coins" : "Searched Results"}</h2>
          {store.coins.map((coin) => {
            return <ListItems key={coin.id} coin={coin} />;
          })}
        </div>
      </div>
    </div>
  );
}

In the above code, we map through the coin array and for each coin, we return the ListItems component with coin.id and coin as props.

{store.coins.map((coin) => {
  return <ListItems key={coin.id} coin={coin} />;
})}

Implementing the Application Header

The last part of this step involves adding a header to our application. We will create a straightforward header with a black background and white text. Upon clicking the header text, the user will be redirected to the Home.jsx page.

Creating the Header.jsx Component

To implement this, we create a new file, Header.jsx, in the components folder. Here's how the code for Header.jsx looks.

import { Link } from "react-router-dom";

export default function Header({ back }) {
  return (
    <header className="header">
      <div className="width">
        <h1>
          <Link to="/">Crypto Tracker</Link>
        </h1>
      </div>
    </header>
  );
}

Like in the ListItems component, we use the component to navigate to the home page when the header text is clicked.

With these implementations, the core components of our application are ready. Finally, we need to focus on the styling to make our application visually appealing.

Final styling

In this section, we will finalize the look and feel of our application. To do so, create a new file named styles.scss in the src directory. Next, copy and paste the following code into this newly created file.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
}

input[type="text"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  display: block;
  width: 100%;
  border-radius: 0%;
}

.width {
  max-width: 600px;
  margin: 0 auto;
  width: 92%;
  position: relative;
}

.header {
  background: #050505;
  color: white;
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

h1 {
  text-align: center;
  color: white;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 2px;
}

h1 a {
  color: white;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

svg {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -12px;
  background-color: rgb(249, 251, 251);
}

.home-search {
  padding: 40px 0;
  text-align: center;
}

h2 {
  font-size: 32px;
  margin-bottom: 8px;
}

input {
  border: 1px solid #ddd;
  padding: 0 24px;
  border-radius: 8px;
  line-height: 54px;
}

.home-cryptos {
  h2 {
    font-size: 26px;
    margin-bottom: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
}

.home-crypto {
  a {
    display: flex;
    gap: 30px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
  }

  span {
    display: block;
  }
}

.home-crypto-image {
  width: 50px;
}

.home-crypto-name {
  flex: 1;
  font-size: 20px;
  color: #111;
  font-weight: 600;
}

.home-crypto-btc {
  font-size: 16px;
  color: #111;
}

.home-crypto-usd {
  font-size: 10px;
  color: #111;
}

.show-header {
  padding: 40px 0;
  text-align: center;
  font-size: 32px;

  img {
    width: 80px;
    border-radius: 50%;
    margin: 0 auto;
  }

  h2 {
    font-size: 32px;
    margin-top: 10px;
  }
}

.show-graph {
  height: 200px;
  width: 100%;
}

.show-details {
  padding-top: 100px;
  padding-bottom: 60px;

  h2 {
    font-size: 26px;
    margin-bottom: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
}

.show-details-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-bottom: 1px solid #ddd;
  color: #666;

  h4 {
    font-size: 16px;
    color: #111;
  }
}

The above style specifications should be quite straightforward to understand, so we won't delve into the specifics for each one.

Finally, import the style specifications into your main.jsx file using the following code.

import "./styles.scss";

Now everything is set, and your application should be good to go.

Final review of the code

As we said earlier, you can download this app from my GitHub repo. You can find all the files we developed here in that repository. Click the following links to get the final code of each file.

Home.jsx

Show.jsx

homeStore.jsx

showStore.jsx

Header.jsx

ListItems.jsx

Debounce.jsx

Conclusion

We've now successfully concluded our Real-Time Crypto Tracker with Real-Time Charts tutorial. To solidify your understanding of what we've covered, I encourage you to interact further with the Coindgecko API. By implementing different functionalities within this app or creating a completely new one, you can extend your learning.

Experimentation is a key part of mastery, so try incorporating more chart types and different data sets. The UI library we utilized in this tutorial is quite handy for front-end development practice, so don't hesitate to experiment with various components.

I hope this tutorial has proven insightful and educational. Looking forward to meeting you in the next tutorial!

If your app deals with user input text in any way, there's a good chance you will benefit from machine learning text analysis. You might want to suggest categories or tags based on the description of an item or content of a post. If you have an app that works across languages, you can detect the language of a string and translate it to the user's native language. You might want to know what a piece of text is about for faster search, better recommendations or better targeted ads. The possibilities are endless.

In all of these cases, iOS offers a one-stop-shop for all your text-related machine learning needs: the Natural Language framework. This framework lets you detect languages and tags or split sentences into parts. Combine it with a custom Core ML model, and you can do custom text classification or tagging on the user's device.

In this Natural Language tutorial you'll find out how to detect the language of an arbitrary string, as well as detect which tags were mentioned in the string, including company, place, and personal names.

By the end of the tutorial, you'll have an app like this:

Setting up the UI

Open up Xcode and create a new single view application. Open Main.storyboard to add your UI. We need four labels and a text field. In order to easily lay them out, we'll use a stack view, so start by dragging in a stack view to the screen. Add three constraints between this stack view and the view:

1. Leading space to safe area with a constant of 20
2. Trailing space to safe area with a constant of 20
3. Top space to safe area with a constant of 20

With that in place, add four labels inside the stack view, one below the other. Edit them to have the following text, from the top-most one to the bottom one:

1. You are speaking in
2. English
3. and you are talking about
4. Apple

These are placeholder texts which you'll change in code later. I changed the English and Apple labels to have a bold font and larger text, just to make it look a bit nicer.

Next, drag over a new text field and position it underneath the stack view (not inside it). Add three new constraints to the this text field:

1. Leading space to safe area with a constant of 20
2. Trailing space to safe area with a constant of 20
3. Vertical spacing to the stack view with a constant of 20

By the end of this your storyboard should look like this:

Next, open up ViewController.swift and drag in three new outlets:

1. An outlet for the English label named languageLabel
2. An outlet for the Apple label named entityLabel
3. An outlet for the text field named textField

@IBOutlet weak var languageLabel: UILabel!
@IBOutlet weak var entityLabel: UILabel!
@IBOutlet weak var textField: UITextField!

Now that our UI is in place, we can start hacking away!

Recognizing Languages

In order to recognize languages, naturally, we need a Language Recognizer. NLLanguageRecognizer is a class from Natural Language that can give you information about a given string's possible language. Start by importing Natural Language at the top of ViewController.swift:

import NaturalLanguage

Next, add the following property to the ViewController class, below the outlets:

let languageRecognizer = NLLanguageRecognizer()

Now it's time to add a new method to the class that we'll use to recognize our language:

func recognizeLanguage(_ text: String)-> NLLanguage? {
  languageRecognizer.reset()
  languageRecognizer.processString(text)
  return languageRecognizer.dominantLanguage
}

First we'll reset the recognizer to make sure it clears any strings we provided earlier. We'll then give it a new string to process and ask it for the dominant language.

The language recognizer can never be 100% sure, so the dominant language is the one it thinks is the most likely candidate. If you want to see other possible languages and just how likely they are, you can use the languageHypotheses method, which gives you a set of languages and a score of how likely they fit the given string.

You can also make the recognizer more precise by helping it out a bit: by setting the languageHints property you can tell the recognizer how likely you think each language is. It will then take this information into account when deciding the language of a string. You can also limit which languages are possible by setting the languageConstraints property.

Now that we have a way to recognize languages, let's hook it up to our text field and UI. Add the following lines to the bottom of viewDidLoad:

languageLabel.text = ""
entityLabel.text = ""
textField.addTarget(self, 
  action: #selector(onTextFieldChanged), for: .editingChanged)

First we'll clear out the UI, and then add a function that will get called each time the text field's value changes.

Now it's time to implement that function. Add the following method to the class:

@objc func onTextFieldChanged(_ textField: UITextField) {
  guard let text = textField.text else {
    return
  }
  
  if let language = recognizeLanguage(text) {
    let name = language.rawValue
    languageLabel.text = name
  }
}

First we'll grab the text from the text field, and then call our previously defined method to get the language of the text. Finally, we'll set the language's rawValue to our label. The language is an enum with a raw string value representing the language code. ("en" for English, "es" for Spanish, etc.)

If you run the project now and type in a string, you should see the string's language pop up in the UI. Pretty cool!

Tagging Text

Now that we know the language, it's time to figure out what the user is talking about. For language recognition we used a recognizer, so, naturally, for tagging we use a tagger.

NLTagger is a very powerful class from Natural Language. It can detect parts of sentences (verbs, nouns, adjectives etc.), special characters (whitespace, quotes), words and idioms, as well as names places, people and organizations. That's a lot of stuff!

In our case, we're interested in the names of places, people and organizations. Things like "California", "Tim Cook" or "Apple". We'll detect these and display what word it is and what type of tag it is for each detected word.

Start by adding the following method to ViewController:

func recognizeTags(_ text: String) -> [(String, NLTag)] {
  let tags: [NLTag] = [.personalName, .placeName, .organizationName]
  let tagger = NLTagger(tagSchemes: [.nameType])
  tagger.string = text
}

This function takes a text input and returns a list of tagged words. The list elements are tuples where the first item is the actual word, and the second item is that word's tag.

We defined a list of tags we're interested in, created an NLTagger instance, and given it our text. We initialize it with the .nameType scheme because we want the tagger to find names inside our string. We can use other schemes, like the .lemma scheme which will give us a word's stem. Using these schemes we can detect lexical classes, languages, scripts and other word types.

Next, add the following code to the end of the method:

var results: [(String, NLTag)] = []
tagger.enumerateTags(
  in: text.startIndex..<text.endIndex,
  unit: .word,
  scheme: .nameType,
  options: [.omitWhitespace, .omitPunctuation, .joinNames],
  using: { tag, range in
    guard let tag = tag, tags.contains(tag) else {
      return true
    }
    
    print("Found tag \(tag) in text \"\(text[range])\"")
    results.append((String(text[range]), tag))
    return true
})
return results

This might seem a little dense at first, but bear with me. We want to enumerate trough every word the tagger found, so we call the enumerateTags method and make sure it goes from start to the end of the string. Again we use the .nameType scheme, and make sure we omit whitespace and punctuation since we don't need them. We also make sure names are joined so "Tim Cook" doesn't become a cook named Tim.

We give enumerate a closure to call for each new tag it found. In the closure we'll filter the tags so that we only save the ones we're interested in. If the tag is one of the ones we need, we'll append it to our result array, together with the actual word.

As we did in the previous section, we need to connect this method to our UI. Add the following code to the end of onTextFieldChanged:

let results = recognizeTags(text)
let entityText = results
  .map { (word, tag) in
    "\(word) (\(tag.rawValue))"
  }
  .joined(separator: ", ")
entityLabel.text = entityText

We'll get all the tag pairs, convert each one to a string where the tag type is in brackets, and join them all into a big comma-separated string. Finally, we'll set that as the label's text.

If you run the project now, you should see all the different types of names as well as the language.

Congratulations! You now have an app that recognizes both the language a user is writing in as well as what they're writing about!

Going Even Further

This tutorial only scratched the surface of what is possible with Natural Language. If you combine it with Core ML, you can train your own text classifiers or taggers. For instance, you can automatically categorize new listings in your web shop or detect inappropriate language and harassment in your chat app.

If you would like to read more about machine learning on iOS, check out our machine learning overview. Good luck!

Apple's Vision framework offers a lot of tools for image processing and image-based machine learning, one of those is detecting faces. This tutorial will show you how to detect faces using Vision, and display those faces on the screen. By the end of the tutorial you'll have an app that looks like this:

You can use facial detection to crop images, focus on important parts of an image, or for letting the users easily tag their friends in an image. You can find the full code of this tutorial on GitHub.

Setting up the UI

We'll start by making sure we can see and pick new photos to detect faces on. Create a new single-view app project in Xcode, and open up Main.storyboard.

Start by dragging an image view from the object library onto the storyboard. Once it's there, add four new constraints to it so that it's fixed to the leading, trailing, top and bottom edges of the safe area. This image view will show the image the faces are being detected on.

Next, drag a button to the storyboard, and add two new constraints:

1. make the button's trailing space equal to the safe area trailing space with a constant of 20
2. make the button's top space equal to the safe area top space with a constant of 20

This should fix the button to the top-right edge of the screen. You'll use this button to show an image picker, so give it a title like "Pick image". I used a camera emoji. By the end of this, your storyboard should look like this:

Next, open ViewController.swift and add an IBOutlet to the storyboard's image view called imageView.

@IBOutlet weak var imageView: UIImageView!

Next, add a new IBAction from the button in the storyboard, and call it cameraButtonTapped.

@IBAction func cameraButtonTapped(_ sender: UIButton) {
}

Next, add the following method to the class:

func showImagePicker(sourceType: UIImagePickerController.SourceType) {
  let picker = UIImagePickerController()
  picker.sourceType = sourceType
  picker.delegate = self
  present(picker, animated: true)
}

This method will show a new image picker as a modal screen, configured with the source type that was passed to the method. At this point you'll get an error because you didn't implement UIImagePickerControllerDelegate yet, so let's do this next. Add the following extension to the bottom of the file:

extension ViewController: UIImagePickerControllerDelegate,
  UINavigationControllerDelegate {
  
  func imagePickerController(
    _ picker: UIImagePickerController, 
    didFinishPickingMediaWithInfo info: 
    [UIImagePickerController.InfoKey : Any]) {
    
    guard let image = info[.originalImage] as? UIImage else {
      return
    }
    
    imageView.image = image
    dismiss(animated: true)
  }
}

This will fetch the picked image and show it on the view controller's image view. It will then dismiss the modal image picker.

We now have the code for the image picker in place, but we're not actually calling the methods anywhere. We'll do this from cameraButtonTapped, when the button gets tapped.

First we'll present an action sheet to let the user pick whether they want to take a new photo or pick an existing one from their library. Add the following code to cameraButtonTapped:

    let actionSheet = UIAlertController(
      title: "Detect faces",
      message: "Pick a photo to detect faces on.",
      preferredStyle: .actionSheet)
    
    let cameraAction = UIAlertAction(
      title: "Take a new photo",
      style: .default,
      handler: { [weak self] _ in
        self?.showImagePicker(sourceType: .camera)
      })
      
    let libraryAction = UIAlertAction(
      title: "Pick from your library",
      style: .default,
      handler: { [weak self] _ in
        self?.showImagePicker(sourceType: .savedPhotosAlbum)
      })
      
    actionSheet.addAction(cameraAction)
    actionSheet.addAction(libraryAction)
    
    present(actionSheet, animated: true)

The user can pick from two options: either selecting an image from their library or taking a new image. Both of these options will call showImagePicker, but with a different parameter for the source type.

We'll add one more tweak: add the following line to the bottom of viewDidLoad:

imageView.contentMode = .scaleAspectFit

This will make sure the image isn't stretched when it's displayed on the image view.

If you run the project now, you should be able to pick an image from your library and see it appear on the view controller.

Detecting Faces

Now that we have our image, we can detect faces on it! To do this we'll use Vision: a built-in framework for image processing and using image-based machine learning.

Vision provides out-of-the-box APIs for detecting faces and facial features, rectangles, text and bar codes (including QR codes). Additionally, you can combine it with custom Core ML models for building things like custom object classifiers. For more information on the different machine learning frameworks in iOS, check out the introduction to machine learning on iOS.

Before we can start using Vision, we need to import it, so add the following import to the top of the file:

import Vision

We'll start by adding a new method to the class called detectFaces:

func detectFaces(on image: UIImage) {
  let handler = VNImageRequestHandler(
    cgImage: image.cgImage!,
    options: [:])
}

The core of vision is the request handler. This handler performs different operations on a single image, which is why we are creating it with the image view's image. The different actions are called "requests", and a handler can perform multiple requests at once.

Since we need to detect faces, we can use the built-in VNDetectFaceRectanglesRequest, which lets us find the bounding boxes of faces on our image.

Add the following property to the class:

lazy var faceDetectionRequest = 
  VNDetectFaceRectanglesRequest(completionHandler: self.onFacesDetected)

A single request can be performed on multiple images, which is why it's good practice to create one shared request object instead of creating it every time a function is called.

Note that there is also a VNDetectFaceLandmarksRequest. Alongside face bounding boxes, it detects facial features like noses, eyes, mouths and similar. Because of that, it's slower than VNDetectFaceRectanglesRequest, so we won't be using it.

Next, we'll implement the completion handler by adding the following method to the class:

func onFacesDetected(request: VNRequest, error: Error?) {
  guard let results = request.results as? [VNFaceObservation] else {
    return
  }
  
  for result in results {
    print("Found face at \(result.boundingBox)")
  }
}

For now we'll just print out the results to the console. The boundingBox property contains a normalized rectangle of where the face is. This means that its origin and scale are percentages of the image's width and height, and not absolute values. We'll see how to deal with that later on in the tutorial.

Next, we need to actually perform the request. We'll do this by adding the following code to the bottom of detectFaces:

DispatchQueue.global(qos: .userInitiated).async {
  do {
    try handler.perform([self.faceDetectionRequest])
  } catch {
    print(error)
  }
}

We'll hop over to a background queue so we don't block the main thread while detection is going on. There, we'll try to use the handler to perform the request. If it fails, we'll simply print the error out.

Finally, we need to call the detectFaces method from imagePickerController, so add the following line to the extension, right above the call to dismiss:

detectFaces(on: image)

If you run the project now and pick an image with a face on it, you should see the faces' bounding boxes printed to the console.

Drawing Boxes

Now that we have the bounding boxes, it's time to draw them on the screen! We'll use Core Animation to create a CALayer for each face's bounding rectangle, and add them to the screen.

Start by adding the following property to the class:

let resultsLayer = CALayer()

This layer will hold all of the faces' rectangles. We'll add this layer to the image view by adding the following code to the bottom of viewDidLoad:

imageView.layer.addSublayer(resultsLayer)

As mentioned before, Vision returns normalized rectangles in the image. This means we need a way to convert from those normalized values into actual coordinates in the image view. To do this, we first need to know where the image actually is within the view (because it gets scaled to fit inside the view). We can do by adding this handy extension by Paul Hudson to the top of the file:

extension UIImageView {
  var contentClippingRect: CGRect {
    guard let image = image else { return bounds }
    guard contentMode == .scaleAspectFit else { return bounds }
    guard image.size.width > 0 && image.size.height > 0 else { return bounds }
    
    let scale: CGFloat
    if image.size.width > image.size.height {
      scale = bounds.width / image.size.width
    } else {
      scale = bounds.height / image.size.height
    }
    
    let size = CGSize(
      width: image.size.width * scale, 
      height: image.size.height * scale)
    let x = (bounds.width - size.width) / 2.0
    let y = (bounds.height - size.height) / 2.0
    
    return CGRect(x: x, y: y, width: size.width, height: size.height)
  }
}

Now that we have the image's bounds, we can use it to de-normalize our face bounding boxes. Add the following method to ViewController:

func denormalized(
  _ normalizedRect: CGRect, 
  in imageView: UIImageView)-> CGRect {
  
  let imageSize = imageView.contentClippingRect.size
  let imageOrigin = imageView.contentClippingRect.origin
  
  let newOrigin = CGPoint(
    x: normalizedRect.minX * imageSize.width + imageOrigin.x,
    y: (1 - normalizedRect.maxY) * imageSize.height + imageOrigin.y)
  let newSize = CGSize(
    width: normalizedRect.width * imageSize.width,
    height: normalizedRect.height * imageSize.height)
  
  return CGRect(origin: newOrigin, size: newSize)
}

This is a lot of math, but don't panic!

Since the values in the normalized CGRect are percentages, we can get the actual values by multiplying them with the images width or height, respectively. We'll also add the images origin to the new rect's origin coordinates so it starts from the same point the image starts. The normalized rectangle has its origin in the lower-left corner, while Core Animation expects drawing to start from the top-left, which is why we're subtracting the origin's y value from 1. Whew!

Now that we have all the pieces in place, it's time to put them together and actually draw these rectangles on the screen. Add the following code to the bottom of onFacesDetected:

DispatchQueue.main.async {
  CATransaction.begin()
  for result in results {
    print(result.boundingBox)
    self.drawFace(in: result.boundingBox)
  }
  CATransaction.commit()
}

Since the callback can be called on an arbitrary thread, we need to move back to the main thread in order to update the UI. We'll perform all updates inside a CATransaction so that they happen in a single UI pass. For each bounding box, we'll draw a face. The final key to this puzzle is adding the drawFace method to the class:

private func drawFace(in rect: CGRect) {
  let layer = CAShapeLayer()
  let rect = self.denormalized(rect, in: self.imageView)
  layer.path = UIBezierPath(rect: rect).cgPath
  layer.strokeColor = UIColor.yellow.cgColor
  layer.fillColor = nil
  layer.lineWidth = 2
  self.resultsLayer.addSublayer(layer)
}

This method creates a new layer and draws the denormalized rectangle with a yellow outline. It then adds this layer to the results layer.

If you run the project now, you should see a yellow rectangle around people's faces!

And that's it! You can find the full code of this tutorial on GitHub.

Other Cool Machine Learning Tools

This Vision tutorial only scratched the surface of machine learning on iOS. You can easily adapt this code to use Vision to detect facial features like eyes or noses. You can also combine Core ML with Vision to use custom object detection models on images. Or better yet, train your own model with Create ML to train your own models. There are also other frameworks like Natural Language. You can learn more about the iOS machine learning landscape in our article on iOS machine learning!

In this tutorial we'll be building a chat app using Go, JavaScript and Scaledrone realtime messaging platform. You can find the full source from GitHub.

Structure of the project

Our tutorial will be broken into two sections:

1. Go authentication server which is responsible for giving precise access rights for each user and allowing them to connect to Scaledrone.
2. JavaScript chat app that authenticates itself using the Go server and manages user communication.

Creating the Go authentication server

You can find the full main.go file from GitHub.

Let's start by defining a few constants and starting an http server for serving static files and providing a single endpoint for user authentication: POST http://localhost:8080/auth.

Replace the scaledroneID and scaledroneSecret constants with the ID and secret from the Scaledrone dashboard.

package main

import (
	"fmt"
	"math/rand"
	"net/http"
	"strconv"
	"time"

	jwt "github.com/dgrijalva/jwt-go"
	"github.com/gorilla/mux"
)

const (
	scaledroneID     = "YOUR_SCALEDRONE_ID"     // 👈 PS! Replace this with your own channel ID 🚨
	scaledroneSecret = "YOUR_SCALEDRONE_SECRET" // 👈 PS! Replace this with your own channel secret 🚨
	port             = ":8080"
)

func main() {
	r := mux.NewRouter()
	r.HandleFunc("/auth", auth).Methods("POST")
	r.PathPrefix("/").Handler(http.FileServer(http.Dir("./static"))).Methods("GET")
	fmt.Printf("Server is running on localhost%s", port)
	panic(http.ListenAndServe(port, r))
}

Every user connecting to the chatroom will authenticate themselves with a JSON Web Token generated by the Go server that the user then passes on to Scaledrone. This gives us the ability to define precise access levels for each user.

In addition to the standard exp claim (expiration time of the token), Scaledrone uses a few custom claims like

• client the client ID of the connecting user
• channel the channel ID that your app uses
• data additional server-side data you can bind to a user. This data will be readable by all users.
• permissions a regular expressions map of access rights. Each regexp string will target specific rooms.

You can read more about Scaledrone's JSON Web Token authentication here.

type customClaims struct {
	jwt.StandardClaims
	Client      string                      `json:"client"`
	Channel     string                      `json:"channel"`
	Data        userData                    `json:"data"`
	Permissions map[string]permissionClaims `json:"permissions"`
}

type permissionClaims struct {
	Publish   bool `json:"publish"`
	Subscribe bool `json:"subscribe"`
}

type userData struct {
	Color string `json:"color"`
	Name  string `json:"name"`
}

func auth(w http.ResponseWriter, r *http.Request) {
	clientID := r.FormValue("clientID")
	if clientID == "" {
		http.Error(w, "No clientID defined", http.StatusUnprocessableEntity)
		return
	}

	// public room
	publicRoomRegex := "^observable-room$"
	// private room of the request user
	userPrivateRoomRegex := fmt.Sprintf("^private-room-%s$", clientID)
	// private rooms of every user besides the request user
	otherUsersPrivateRoomsRegex := fmt.Sprintf("^private-room-(?!%s$).+$", clientID)
	claims := customClaims{
		StandardClaims: jwt.StandardClaims{
			ExpiresAt: time.Now().Add(time.Minute * 3).Unix(),
		},
		Client:  clientID,
		Channel: scaledroneID,
		Data: userData{
			Name:  getRandomName(),
			Color: getRandomColor(),
		},
		Permissions: map[string]permissionClaims{
			publicRoomRegex: permissionClaims{ // public room
				Publish:   true, // allow publishing to public chatroom
				Subscribe: true, // allow subscribing to public chatroom
			},
			userPrivateRoomRegex: permissionClaims{
				Publish:   false, // no need to publish to ourselves
				Subscribe: true,  // allow subscribing to private messages
			},
			otherUsersPrivateRoomsRegex: permissionClaims{
				Publish:   true,  // allow publishing to other users
				Subscribe: false, // don't allow subscribing to messages sent to other users
			},
		},
	}

	// Create a new token
	token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)

	// Sign the token with our secret
	tokenString, err := token.SignedString([]byte(scaledroneSecret))
	if err != nil {
		http.Error(w, "Unable to sign the token", http.StatusUnprocessableEntity)
		return
	}
	// Send the token to the user
	w.Write([]byte(tokenString))
}

As you can see, each authenticating user is given individual access levels to three rooms defined by regular expressions. Each regexp defines one type of access level.

• ^observable-room$ Targets the public room in which everyone will be able to publish messages and subscribe to them.

  To get access to the who's online features we're using Scaledrone's observable rooms feature. For this to work, the room name needs to be prefixed with observable-.

• ^private-room-clientid$ Targets the private room of the user currently being authenticated. That user will be the only one that can subscribe to their own room (into which other users will be sending private messages).
• ^private-room-(?!clientid$).+$ Targets all private rooms besides the private room of the user currently being authenticated. This allows everyone to publish private messages to other users but not subscribe to them.

To keep the tutorial shorter, we're going to be assiging each user a random color and name using the JWT data claim. In your own app, pull this data from your database.

func getRandomName() string {
	adjs := []string{"autumn", "hidden", "bitter", "misty", "silent", "empty", "dry", "dark", "summer", "icy", "delicate", "quiet", "white", "cool", "spring", "winter", "patient", "twilight", "dawn", "crimson", "wispy", "weathered", "blue", "billowing", "broken", "cold", "damp", "falling", "frosty", "green", "long", "late", "lingering", "bold", "little", "morning", "muddy", "old", "red", "rough", "still", "small", "sparkling", "throbbing", "shy", "wandering", "withered", "wild", "black", "young", "holy", "solitary", "fragrant", "aged", "snowy", "proud", "floral", "restless", "divine", "polished", "ancient", "purple", "lively", "nameless"}
	nouns := []string{"waterfall", "river", "breeze", "moon", "rain", "wind", "sea", "morning", "snow", "lake", "sunset", "pine", "shadow", "leaf", "dawn", "glitter", "forest", "hill", "cloud", "meadow", "sun", "glade", "bird", "brook", "butterfly", "bush", "dew", "dust", "field", "fire", "flower", "firefly", "feather", "grass", "haze", "mountain", "night", "pond", "darkness", "snowflake", "silence", "sound", "sky", "shape", "surf", "thunder", "violet", "water", "wildflower", "wave", "water", "resonance", "sun", "wood", "dream", "cherry", "tree", "fog", "frost", "voice", "paper", "frog", "smoke", "star"}
	return adjs[rand.Intn(len(adjs))] + "_" + nouns[rand.Intn(len(nouns))]
}

func getRandomColor() string {
	return "#" + strconv.FormatInt(rand.Int63n(0xFFFFFF), 16)
}

Setting up the frontend

All of the frontend files live in the /static directory.

index.html

You can find the full index.html file from here. The file contains:

• Scaledrone JavaScript library script tag
• Reference to the script.js file
• HTML Markup
• CSS Styles

script.js

You can find the full script.js file from here.

Let's get started by connecting to Scaledrone and then authenticating ourselves by making a POST request to our Go authentication server at http://localhost:8080/auth. Once we receive the JSON Web Token, we pass it on to Scaledrone.

// 👇 PS! Replace this with your own channel ID 🚨
const CLIENT_ID = 'YOUR_SCALEDRONE_ID';

// public room
const PUBLIC_ROOM_NAME = 'observable-room';
// array of connected memebers
let members = [];
// the session user
let me;
// keeping track of which room the user has selected
let selectedRoom = PUBLIC_ROOM_NAME;
// room name to messages map, this is used to store messages for displaying them
// at a later state
const roomMessages = {};

const drone = new Scaledrone(CLIENT_ID);

drone.on('open', error => {
  if (error) {
    return console.error(error);
  }
  // get JWT from the Go server for the clientID
  const formData = new FormData();
  formData.append('clientID', drone.clientId);
  fetch('/auth', {body: formData, method: 'POST'})
    .then(res => res.text())
    .then(jwt => drone.authenticate(jwt));
});

drone.on('authenticate', error => {
  if (error) {
    return console.error(error);
  }
  console.log('Successfully connected to Scaledrone');
  joinPublicRoom();
  joinPersonalRoom();
});

Once we've successfully connected and authenticated ourselves, we'll subscribe to messages both from the public room as well as our own private room (for private messages sent to us).

As all users subscribe to the public room, we can use it for detecting who is connected to the app as well as get notified when new users join and leave.

This is the most complex section of this tutorial but don't be alarmed. It's actually quite repetitive, and I added comments that will help you understand what's going on.

// Start subscribing to messages from the public room
function joinPublicRoom() {
  const publicRoom = drone.subscribe(PUBLIC_ROOM_NAME);
  publicRoom.on('open', error => {
    if (error) {
      return console.error(error);
    }
    console.log(`Successfully joined room ${PUBLIC_ROOM_NAME}`);
  });

  // Received array of members currently connected to the public room
  publicRoom.on('members', m => {
    members = m;
    me = members.find(m => m.id === drone.clientId);
    DOM.updateMembers();
  });

  // New member joined the public room
  publicRoom.on('member_join', member => {
    members.push(member);
    DOM.updateMembers();
  });

  // Member left public room (closed browser tab)
  publicRoom.on('member_leave', ({id}) => {
    const index = members.findIndex(member => member.id === id);
    members.splice(index, 1);
    DOM.updateMembers();
  });

  // Received public message
  publicRoom.on('message', message => {
    const {data, member} = message;
    if (member && member !== me) {
      addMessageToRoomArray(PUBLIC_ROOM_NAME, member, data);
      if (selectedRoom === PUBLIC_ROOM_NAME) {
        DOM.addMessageToList(data, member);
      }
    }
  });
}

// Start subscribing to messages from my private room (PMs to me)
function joinPersonalRoom() {
  const roomName = createPrivateRoomName(drone.clientId);
  const myRoom = drone.subscribe(roomName);
  myRoom.on('open', error => {
    if (error) {
      return console.error(error);
    }
    console.log(`Successfully joined room ${roomName}`);
  });

  myRoom.on('message', message => {
    const {data, clientId} = message;
    const member = members.find(m => m.id === clientId);
    if (member) {
      addMessageToRoomArray(createPrivateRoomName(member.id), member, data);
      if (selectedRoom === createPrivateRoomName(clientId)) {
        DOM.addMessageToList(data, member);
      }
    } else {
      /* Message is sent from golang using the REST API.
       * You can handle it like a regular message but it won't have a connection
       * session attached to it (this means no member argument)
       */
    }
  });
}

drone.on('close', event => {
  console.log('Connection was closed', event);
});

drone.on('error', error => {
  console.error(error);
});

function changeRoom(name, roomName) {
  selectedRoom = roomName;
  DOM.updateChatTitle(name);
  DOM.clearMessages();
  if (roomMessages[roomName]) {
    roomMessages[roomName].forEach(({data, member}) =>
      DOM.addMessageToList(data, member)
    );
  }
}

function createPrivateRoomName(clientId) {
  return `private-room-${clientId}`;
}

function addMessageToRoomArray(roomName, member, data) {
  console.log('add', roomName, member.id, data);
  roomMessages[roomName] = roomMessages[roomName] || [];
  roomMessages[roomName].push({member, data});
}

Lastly, we'll be writing the code that directly manipulates the DOM and renders our application. We won't be using any fancy frameworks as the frontend can easily be built with under a hundred lines of native JavaScript:

const DOM = {
  elements: {
    me: document.querySelector('.me'),
    membersList: document.querySelector('.members-list'),
    messages: document.querySelector('.messages'),
    input: document.querySelector('.message-form__input'),
    form: document.querySelector('.message-form'),
    chatTitle: document.querySelector('.chat-title'),
    room: document.querySelector('.room'),
  },

  // Send message to Scaledrone and clear the input
  sendMessage() {
    const {input} = this.elements;
    const value = input.value;
    if (value === '') {
      return;
    }
    input.value = '';
    drone.publish({
      room: selectedRoom,
      message: value,
    });
    addMessageToRoomArray(selectedRoom, me, value);
    this.addMessageToList(value, me);
  },

  // Create DOM element with member name and color
  createMemberElement(member) {
    const { name, color } = member.authData;
    const el = document.createElement('div');
    el.appendChild(document.createTextNode(name));
    el.className = 'member';
    el.style.color = color;
    if (member !== me) {
      // Listen to user clicking on another user
      el.addEventListener('click', () =>
        changeRoom(member.authData.name, createPrivateRoomName(member.id))
      );
    }
    return el;
  },

  // Rerender the list of connected members
  updateMembers() {
    this.elements.me.innerHTML = '';
    this.elements.me.appendChild(this.createMemberElement(me));
    this.elements.membersList.innerHTML = '';
    members.filter(m => m !== me).forEach(member =>
      this.elements.membersList.appendChild(this.createMemberElement(member))
    );
  },

  // Create a DOM element for the message
  createMessageElement(text, member) {
    const el = document.createElement('div');
    el.appendChild(this.createMemberElement(member));
    el.appendChild(document.createTextNode(text));
    el.className = 'message';
    return el;
  },

  // Add message element to the messages container
  addMessageToList(text, member) {
    const el = this.elements.messages;
    const wasTop = el.scrollTop === el.scrollHeight - el.clientHeight;
    el.appendChild(this.createMessageElement(text, member));
    if (wasTop) {
      el.scrollTop = el.scrollHeight - el.clientHeight;
    }
  },

  updateChatTitle(roomName) {
    this.elements.chatTitle.innerText = roomName;
  },

  clearMessages() {
    this.elements.messages.innerHTML = '';
  },
};
// Listen to submitting the input form
DOM.elements.form.addEventListener('submit', () =>
  DOM.sendMessage()
);
// Listen to user clicking on the public room label
DOM.elements.room.addEventListener('click', () =>
  changeRoom('Public room', PUBLIC_ROOM_NAME)
);

Bravo! You are done. 🐹✈️

If anything was left unclear from this tutorial, I recommend grabbing the full source code from GitHub, replacing the channel ID and channel secret and running the project.

And as always, if you have any questions or feedback feel free to contact us.

Machine learning is one of those terms in programming that sounds like you need a PhD from Stanford to understand, but is in reality pretty simple and easy to get started with. Here's some big words, don't panic: iOS lets you train your own convolutional neural network using transfer learning. By the end of this article you'll understand every term from the earlier sentence.

Apple also provides a bunch of different tools and frameworks for out-of-the-box machine learning features and it can be confusing to know how they all fit together and where you should start. This article will shine some light on this issue and point you in the right direction.

Recognizing cats is just one of the many uses for machine learning. You can process a sentence and detect its meaning or emotion. Speaking of emotions, you can tell whether a person is happy or sad from their photo. You can detect faces, landmarks, read text in an image or even get a textual description of an image. Machine learning is a simple but very flexible tool to solve all kinds of problems.

How does machine learning work?

Let's think about how you would recognize a car in an image. You, as a human, have eventually learned that cars have some car-like features. Most of them have four wheels. They're roughly cuboid in shape. They usually have doors with windows on the sides and big windows at the front and back. We can go on and on, but you get the gist: you recognize a car by recognizing a set of car-like features.

Not all of those features are equally important. Some cars have a spoiler, but the absence of a spoiler does not automatically make something less car-like. However, missing two out of four wheels makes something much less car-like. In other words, some features carry more weight than others.

(Lit Motors C-1: Technically a car?; credit: Intel Free Press)

Machine learning works the same way. A machine learning model contains a set of features, each with their own weight. The model will then recognize those features in the original image, sum them all up with their respective weights, and pop out a result.

(credit: Perceptron. Mitchell, Machine Learning, p87.)

But summing up the features is easy: what's complex is finding those features and how much does each feature matter. When machine learning first started, humans would program in those features. They would analyze the data, find connections and patterns and program in those patterns.

The "machine" part was learning how much each feature actually matters. Each feature is multiplied by a weight, which can either increase of decrease how much it impacts the result. The model starts out with random weights. You then give it an image of a car and tell it "this is a car." It will modify the weights so that the output for that image is "car". You then repeat this process for thousands or millions of images, and you get back a model with correctly configured weights. This process is called training.

Because you configured the model with thousands of car images, the model should produce the output "car" for a new, never before seen, image.

Of course, lots of things can go wrong in this step. If you give the model only a few images, it might be very unsure of the answer. This is called under-fitting. However, giving the model too much information is also not good, because it will think only cars with spoilers are cars. This is called over-fitting. By selecting the correct features and giving it enough data we strike a balance between over-fitting and under-fitting.

To make sure our model behaves correctly we always take a bit of data we have and don't feed it to the model. We can then check what result we get from the model when we give it that data, so that we can check if it's working correctly or not. This is called validation.

Neural Networks

What I described here is traditional machine learning. Convolutional neural networks are a part of deep learning and they go one step further: in CNNs, even the features are learned automatically. All you do is adjust a few parameters, give it the inputs and outputs and the network does the rest. Pretty cool, right?

They do this by basically trying out what works, and discarding what doesn't. They might learn to recognize spoilers, but realize those don't really matter all that much. Or they might say wheels are somewhat important, but the number of wheels is very important.

At the end of this training process you get a convolutional neural network, which is a set of features and weights connected in layers to other features and weights.

(https://playground.tensorflow.org)

If you teach a human to recognize dogs, you can very easily teach them to recognize cats. Just tell them "they're kind of like dogs, but more self-centered and smaller." CNNs are the same way. If you have a network that recognizes cats, you can easily reuse most of it for dogs. If you can recognize cars, you can probably also recognize motorcycles. Just take the same features but give them different weights!

This process of reusing networks is the standard way people use machine learning today. If you want your own image classifier, you take a network that's been trained on millions of images, and add your own bit of data to that. The network already knows how to recognize all kinds of features, so it can easily adapt to your specific images. This type of machine learning is called transfer learning.

What does iOS offer?

As machine learning found its way into mainstream software development, Apple gave us lots of tools to use it. They range from easy to use libraries all the way to command line scripts to make your own models.

Here's an overview of the different machine learning tools Apple provides:

Vision

Vision is a framework for working with images. It contains ready-made functions for detecting rectangles, text and barcodes (including QR codes). This is perfect for scanning loyalty or gift cards, receipts, stickers, documents and other rectangular objects.

Vision also offers easy to use face detection and tracking, so you can identify people inside photos and make sure the image is cropped correctly, the person is in focus and other cool things that improve the user's experience.

The first step in using Vision is to create a VNImageRequestHandler. This class is responsible for performing requests and calling completion handlers. It also keeps track of the image you want to work on.

let requestHandler = VNImageRequestHandler(
    cgImage: image,
    options: [:])

Your next step is to create a request which will specify what the handler should do. In this case, we'll create a face detection request. These can be reused for multiple images, and you can use multiple requests in tandem on a single request handler, so you can detect, for instance, both rectangles and text at the same time.

let request = VNDetectFaceRectanglesRequest { (request, error) in
    guard
        error != nil,
        let results = request.results as? [VNFaceObservation]
    else {
        print(error ?? "results are incorrect")
        return
    }
    
    for result in results {
        print("Found a face at \(result.boundingBox.origin)")
    }
}

Finally, we perform the actual request.

do {
    try requestHandler.perform([request])
} catch {
    print(error)
}

And that's pretty much all there is to it!

Natural Language

A framework like Vision, but used for analyzing human languages. For instance, Natural Language lets you split a sentence into words and get information about each word, like if it's a number, an emoji or something else.

You can also detect unknown languages. Using NLLanguageRecognizer you can find out what's the most likely language of some string. This can help you automatically translate different languages for users, or to detect what language your users prefer and adjust your app accordingly.

Another big use case of Natural Language is linguistic tagging. Tagging gives you more information about your users input. You can split a sentence into nouns, verbs, adjectives etc. to parse natural language commands. You can also identify people or places that are mentioned in the sentence. This makes it easy to recognize things like "Add a reminder to buy Suzan a present for her birthday."

If you want to get the names from a string, you can create an NLTagger with the .nameType tag scheme. This scheme also includes place and organization names, so the tagger will also detect those.

let tagger = NLTagger(tagSchemes: [.nameType])
tagger.string = text

Next, call enumerateTags to get all the tags.

tagger.enumerateTags(
    in: text.startIndex..<text.endIndex,
    unit: .word,
    scheme: .nameType,
    using: { (tag, range) in
        if tag == .personalName {
            print("Found name: \(text[range])")
        }
        return true
	})

Since we're only interested in personal names, we'll print those out and ignore the other tags.

Core ML

Core ML lets you use your own custom machine learning models. This can be any model, from pre-made ones you found on the internet all the way to models you trained from scratch. You can use Core ML to load models and then combine them with Vision or Natural Language for things like object recognition or complex language processing.

Apple also provides a set of ready-mode models for working with images. Different models are good at different tasks. For general object recognition, I recommend starting with MobileNet as its optimized for mobile devices.

To use one of these models, simply download it and drag and drop it into your Xcode project. You can then use Core ML to instantiate that model.

let model: VNCoreMLModel

do {
    model = try VNCoreMLModel(for: MobileNet().model)
} catch {
    print(error)
    return
}

To use it with vision we'll create a request just like in the Vision example, but this time it's a Core ML request with our model.

let request = VNCoreMLRequest(
    model: model,
    completionHandler: { request, error in
        guard
            let results = request.results as? [VNClassificationObservation]
        else {
            return
        }
        
        for result in results {
            print("Found object: \(result.identifier)")
        }
	})

We can then perform this request just like in the above example. As you can see, you can add object recognition to your app in just a few lines of code!

Create ML

While Core ML lets you use your own models, Create ML lets you create them from the data you have. Create ML is optimized for macOS and is integrated with Xcode's playgrounds, so it's the easiest way for iOS developers to train their own machine learning models.

To create an custom image classifier model, simply launch a new macOS playground and write these two lines of code:

import CreateMLUI

let builder = MLImageClassifierBuilder()
builder.showInLiveView()

A new pane shows up in the assistant editor where you can drag and drop images organized by class. Each class needs to have its own folder. Drag and drop those folders and the training will start immediately.

You can also tweak settings like how many iterations it will take, or whether it should create new input images by morphing the original ones to make the model more robust.

This is where transfer learning kicks in: Apple has their own network to recognize images, so Create ML is really fast and produces tiny models, because it leans heavily on the knowledge it already has. Once you have a model you can use Core ML to add it to your app like in the example above.

Turi Create

Used for the same purpose as Create ML, but it's a little more flexible and supports more types of models. The catch is that it's a Python library, so no Swift support!

But don't worry if you never used Python. Setting up Turi Create couldn't be easier, and Python is a very simple language that you can get the hang of pretty fast. Turi Create is out of scope for this article, but it's good to know that you can get even more flexibility when you run into issues with Create ML.

Start Using ML

As you can see, Apple offers a lot of tools with varying levels of flexibility. If you need general object detection, you can easily use Vision. If you want to detect a specific object, you can build your own model with Create ML and use Core ML in combination with Vision to detect that object. Trust me, it sounds a lot more complicated than it really is.

I urge you to try some of these approaches out. Machine learning is hitting the mainstream hard, and it's here to stay. By learning more about it you can still be ahead of the curve and provide your users with cool features your competitors might not have. Good luck!

Dealing with the keyboard on iOS can be a tricky task. The keyboard often hides important buttons or information or hides part of a scroll view. I can't log into my mobile banking app on an iPhone SE, because the keyboard pops up over the "Login" button. You don't want those kinds of issues! In this tutorial, you'll see how to observe when the keyboard rises and falls, and how to adjust buttons and scroll views accordingly.

Here are the two most common issues that can happen when a keyboard appears:

1. The keyboard covers a vital button, like the "Login" button in the example above. If you don't have a way to dismiss the keyboard, you have just locked your user out of using the app. Even if you can dismiss the keyboard, it's still not a very good user experience to have a button disappear.
2. The keyboard rises above a scroll view, hiding the content on the bottom. The scroll view's bounds will extend underneath the keyboard, making the content on the bottom of the scrollview invisible.

In this tutorial, you'll find out how to fix these two issues in a general, reusable, and protocol-oriented way. The solution you will make will apply to almost any screen in your app.

Fixing the second issue is easy. You need to observe when the keyboard appears and get its height. Once you have the height you can increase the scroll view's content insets by that height. This adds padding to the bottom of the scroll view, so everything that was covered by the keyboard is pushed up.

To fix the issue with the keyboard covering a button, there are two things you can do:

1. Make the whole screen scrollable, and then do the same things as mentioned above for the scroll view problem.
2. Push the button up (by manipulating its constraints or frame) so that it's no longer being covered by the keyboard. This will only work if you have space for all your UI elements above the keyboard. It also might require changing the margins of all the views so that the whole screen is more compact.

Let's see these solutions in action!

The Apple Way

The default ways Apple gives us to deal with this are cumbersome. To observe the keyboard rising, you need to subscribe to the keyboardDidShowNotification.

class ViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()
    NotificationCenter.default.addObserver(
      self,
      selector: #selector(keyboardWasShown),
      name: UIWindow.keyboardDidShowNotification,
      object: nil)
  }
  
  @objc func keyboardWasShown(_ notification: NSNotification) {
    
  }
}

Once you have the NSNotification, you can fetch the keyboard's size from the userInfo property of the notification. The key which holds the size is keyboardFrameEndUserInfoKey. This gives you the frame of the keyboard at the end of the rising animation. You can also track each frame change, as well as see the frame at the start of the animation. There aren't very useful to us, so we'll stick with the end frame.

@objc private func keyboardWasShown(_ notification: NSNotification) {
  let key = UIResponder.keyboardFrameBeginUserInfoKey
  guard let frameValue = notification.userInfo?[key] as? NSValue else {
    return
  }
  
  let frame = frameValue.cgRectValue
}

If you're dealing with a scroll view, once you have the frame it's easy enough to increase its bottom inset. Simply add the following lines to the end of keyboardWasShown:

scrollView.contentInset.bottom = frame.size.height
scrollView.scrollIndicatorInsets.bottom = frame.size.height

If you're dealing with a hidden button, the exact steps to fix the issue depend on your specific UI. The general gist is that you have to raise the button by a certain amount so that it's visible. In other words, the button's offset from the bottom of the screen needs to be greater than (or equal) to the keyboard's height.

You also have to undo these changes once the keyboard goes back down. To do this, you can observe a second notification, keyboardWillHideNotification. This notification will get triggered before the keyboard hides. Add the following lines to the bottom of viewDidLoad:

NotificationCenter.default.addObserver(
   self,
   selector: #selector(keyboardWasShown),
   name: UIResponder.keyboardWillHideNotification,
   object: nil)

Next, add the following method to the class:

@objc func keyboardWillHide() {
  scrollView.contentInset.bottom = 0
  scrollView.scrollIndicatorInsets.bottom = 0
}

Since we know that the keyboard's height is going back to zero, there's no need to fetch the frame this time. Simply reset the insets to their initial values.

And that's it! Our screen now no longer has any issues.

While this solution works, it's not convenient. Having to write these boilerplate lines over and over again for every screen will get pretty tiring. Thankfully, we can use some cool Swift features to reduce the boilerplate to a minimum.

A Nicer Way

Like a good Swift developer, we'll start with a protocol!

public protocol KeyboardObserving: class {
  func keyboardWillShow(withSize size: CGSize)
  func keyboardWillHide()
}

Anyone who is interested in getting notified when the keyboard appears can implement this protocol. We'll hide the protocol's logic in an extension which will subscribe to the notifications. Coming up is a lengthy block of code but don't panic: you've already seen most of this code earlier in the tutorial.

extension KeyboardObserving {
  
  public func addKeyboardObservers(to notificationCenter: NotificationCenter) {
    notificationCenter.addObserver(
      forName: UIResponder.keyboardWillShowNotification,
      object: nil,
      queue: nil,
      using: { [weak self] notification in
        let key = UIResponder.keyboardFrameEndUserInfoKey
        guard let keyboardSizeValue = notification.userInfo?[key] as? NSValue else {
          return;
        }
        
        let keyboardSize = keyboardSizeValue.cgRectValue
        self?.keyboardWillShow(withSize: keyboardSize.size)
    })
    notificationCenter.addObserver(
      forName: UIResponder.keyboardWillHideNotification,
      object: nil,
      queue: nil,
      using: { [weak self] _ in
        self?.keyboardWillHide()
    })
  }
  
  public func removeKeyboardObservers(from notificationCenter: NotificationCenter) {
    notificationCenter.removeObserver(
      self,
      name: UIResponder.keyboardWillHideNotification,
      object: nil)
    notificationCenter.removeObserver(
      self,
      name: UIResponder.keyboardWillShowNotification,
      object: nil)
  }
}

This is the same code as in the view controller before. The difference is that anyone who implements the protocol can use these functions. We can reduce a lot of our view controller's code this way.

class ViewController: UIViewController, KeyboardObserving {
  
  @IBOutlet var scrollView: UIScrollView!

  override func viewDidLoad() {
    super.viewDidLoad()
    addKeyboardObservers(to: .default)
  }
  
  func keyboardWillShow(withSize size: CGSize) {
    scrollView.contentInset.bottom = size.height
    scrollView.scrollIndicatorInsets.bottom = size.height
  }
  
  func keyboardWillHide() {
    scrollView.contentInset.bottom = 0
    scrollView.scrollIndicatorInsets.bottom = 0
  }
  
  deinit {
    removeKeyboardObservers(from: .default)
  }
}

That's 10 lines of code less just in this one view controller. You'll probably want to observe the keyboard in many screens in your app, so this little bit of extra work pays off immensely!

Going a Step Further

Setting the scroll view's content insets when the keyboard appears is a frequent requirement. You'll have to do this in almost any screen that combines a keyboard and a scroll view. Why not go a step further without protocols, and define one for that specific use case.

public protocol ScrollViewKeyboardObserving: KeyboardObserving {
  var keyboardObservingScrollView: UIScrollView { get }
}

Swift lets us inherit from protocols. Since we're making a specific case of the KeyboardObserving protocol, it makes sense to inherit from it. Our only requirement is that the implementer of the protocol exposes a scroll view that we can set insets on.

Next, we'll define an extension that does the same thing as in our view controller.

extension ScrollViewKeyboardObserving {
  func keyboardWillShow(withSize size: CGSize) {
    keyboardObservingScrollView.contentInset.bottom = size.height
    keyboardObservingScrollView.scrollIndicatorInsets.bottom = size.height
  }
  
  func keyboardWillHide() {
    keyboardObservingScrollView.contentInset.bottom = 0
    keyboardObservingScrollView.scrollIndicatorInsets.bottom = 0
  }
}

This extension implements the KeyboardObserving protocol, so anyone that conforms to ScrollViewKeyboardObserving will automatically conform to that protocol.

Going back to our view controller, we can rewrite it as the following:

class ViewController: UIViewController, ScrollViewKeyboardObserving {
  
  @IBOutlet var scrollView: UIScrollView!
  
  var keyboardObservingScrollView: UIScrollView {
    return scrollView
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    addKeyboardObservers(to: .default)
  }
  
  deinit {
    removeKeyboardObservers(from: .default)
  }
}

Reducing even more lines of code. We used Swift features like protocol-oriented programming, extensions and inheritance to reduce our boilerplate to an absolute minimum. Dealing with scroll views is now a simple task of declaring a variable and calling two functions.

Why Bother?

The original solution worked fine, so why go through the trouble of making things reusable? Well, first of all, we have fewer lines of code. Since code is the single largest source of bugs, reducing the number of code reduces bugs. We also have a single point to change, refactor and debug the behaviour. If the code were copied and pasted into a bunch of view controllers, it would have been a pain to fix a bug in each instance of the code.

Making things reusable makes life easier on both you and other developers reading your code. There's no reason why you should make your life harder: always think of coding things in the most general way you can.

This blog post compares two similar technologies: WebSockets and SSEs. We'll describe their similarities and differences. Next, we'll look at best use cases for both. Finally, we’ll have a look at the additional features offered by ScaleDrone's Enhanced WebSockets.

WebSockets and SSEs: the similarities

The last two blog posts covered WebSocket and SSE technology in detail. Let´s now have a look at the similarities between the two. For starters, both WebSockets and SSEs make use of HTTP connections, although in case of WebSockets a TCP handshake effectively upgrades from HTTP protocol to WebSocket protocol, allowing WebSocket applications to more easily fit into existing infrastructures. However, the main similarity between both is their functionality: both push data from the client to server, a process also known as “server push”. With this in mind, let´s now have a look at some differences between the two before we can talk about best use cases for both technologies.

Differences between SSEs and WebSockets

Before we get into the differences between both technologies, we should state they're not competing technologies, nor is one better than the other. The popularity of WebSockets over SSEs can be explained by the fac that WebSockets have received more attention (and appreciation) than SSEs, and it’s a fact that more browsers support it natively than they support SSEs.

The differences between both technologies are not that big, and if you want to do “server-push” only, both are good choices. Let´s have a look at their differences. By far the biggest difference between both technologies is that WebSockets are full-duplex, bidirectional communication between client and server, whereas SSEs are mono-directional.

SSEs come with a set of features that WebSockets lack by design, such as automatic reconnection, event IDs and sending arbitrary events. On the other hand, WebSockets are able to detect a dropped client connection, whereas SSEs first need to send a message before detecting the same issue. In terms of browser support, both Internet Explorer and Edge do not yet support SSEs, although polyfills that simulate SSE functionality are available to solve this issue.

Although WebSockets use an initial HTTP connection, this connection is updated after a TCP handshake after which data is sent through the WebSocket protocol. This is a more complex protocol than the SSE protocol. Because they’re bidirectional, WebSocktets require more development effort than SSEs, that only need to send an HTTP message with a specific header, whereas a WebSocket needs to establish and maintain a TCP socket communication, as well as a listener socket on the server side.

It´s good to know that SSE suffers from a limitation to the maximum number of open connections, which can be specially painful when opening various tabs as the limit is per browser is six. Only WebSockets can transmit both binary data and UTF-8, whereas SSE is limited to UTF-8.

While WebSockets are more complex and demanding than SSEs, a full-duplex TCP connection makes it useful for a wider range of application scenarios. SSE is a simpler and faster solution, but it isn't extensible: if your web application requirements were to change, it would need to be refactored using WebSocket. Although WebSocket technology presents more upfront work, it´s a more versatile and extensible framework, so a better option for complex applications that will add new features over time.

WS and SSE Best Use Cases

In the end, whether you should be using WebSockets or SSEs depends on your use case. As stated before, SSEs cannot provide bidirectional client-server communication as opposed to WebSockets. Use cases that require such communication are real-time multi-player games and messaging and chat apps. When there´s no need for sending data from a client, SSEs might be a better option than WebSockets. Examples of such use cases are status updates, news feeds and other automated data push mechanisms.

How Scaledrone uses WebSocket technology

Scaledrone offer a real-time messaging service and platform that can be used for sending live updates, create chatrooms and collaborative tools. Scaledrone makes use of Enhanced WebSockets that offer additional features. These are used when possible. When needed, it falls back to technologies such as XHR streaming, JSONP polling and XHR polling. Use cases for which they´re used are chat, notifications and real-time updates, for the creation of live maps, real-time dashboards and much more.

Conclusion

In this blog post we compared WebSockets and SSEs. We discussed the differences and similarities between the two technologies. While both can be used for “server push”, there are many subtle differences between the two. Because WebSockets have received more attention from developers and bloggers, SSEs are lesser-known but no less potent. We looked at best use cases for both and concluded that the use case should define your final choice if “server push” is what you´re after. Finally, we described how Scaledrone uses WebSocket technology to drive the real-time web.

One thing that can differentiate your app from other apps on the market is building in chat functionality. Online marketplaces, social networks and collaboration tools can all benefit from in-app chat. Your users can communicate with each other without having to exchange contact information or leave the app.

In this tutorial, we're going to be building a realtime group chat for iOS using the Scaledrone Swift API Client. It will work very similarly to apps such as WhatsApp, Facebook Messager and LINE.

By following this tutorial you'll make a chat application that works cross platform with our Android chat tutorial.

You can find the full source code on GitHub.

Note: This tutorial uses Xcode 10 and Swift 4.2.

Setting Up The App

First things first, in Xcode, create a new Single View App, and call it whatever you like. To make our lives easer, we'll use two dependencies. The first one is Scaledrone, which simplifies real time messaging. The second one is MessageKit, a chat UI library which provides a customizable list of messages, with chat bubbles, avatars, username labels and other neat UI features.

Now that we have our project, we need to add Scaledrone and MessageKit as dependencies. We'll do this by using CocoaPods, a dependency manager for iOS. If you don't have CocoaPods installed, install it by following the instructions on the CocoaPods website.

In Terminal, navigate to the root directory of your Xcode project using the cd command.

cd Path/To/YourProject/

Once you're in the directory, run the following command to initialize CocoaPods.

pod init

This will create a text file called Podfile in the directory. Open it with your favorite text editor, and insert the following lines right above the end.

pod 'MessageKit'
pod 'Scaledrone', '~> 0.3.0'

Back in Terminal, still in the same directory, run the following command:

pod install

This will install MessageKit, Scaledrone and all of their dependencies. It will also generate a .xcworkspace file. Close your project in Xcode, and open up the workspace by double clicking on the .workspace file. In order for your dependencies to work, you need to use the workspace file, and not .xcodeproj.

Note: At the time of writing, MessageKit is not updated for Swift 4.2, so you might get compiler errors when building after installing the pod. To fix this, click on the Pods project in the Project navigator, and then select the MessageKit target. Go into Build Settings and set Swift Language Version to Swift 4. After this the errors should disappear.

Creating the UI

Thanks to MessageKit, creating a good looking chat UI is a pretty simple process. Xcode has already generated a ViewController.swift file for you. This will be the main view controller in your app.

The first thing you'll do is import the MessageKit library so you can work with it. Add the following line to the top of the file.

import MessageKit

Now change the ViewController class declaration so that it inherits from MessagesViewController, and not UIViewController.

class ViewController: MessagesViewController {

MessagesViewController is the cornerstone of MessageKit. It contains a collection view that displays messages, as well as an input bar for sending a new message.

If you run the project now, you'll see that we already have a basic chat UI set up. The only problem is that we can't actually send any messages, so the messages collection view is blank.

First of all, we need a way to store all the messages that we want to display. We'll need a model to hold our messages, as well as a model for the users. Create a new file called Message.swift and add the following code:

import Foundation
import UIKit
import MessageKit

struct Member {
  let name: String
  let color: UIColor
}

struct Message {
  let member: Member
  let text: String
  let messageId: String
}

These are just simple models to hold our message data. Instead of avatars, each member will have a color assigned to them and displayed next to their message.

Because MessageKit works with messages that conform to the MessageType protocol, we'll extend Message to do so:

extension Message: MessageType {
  var sender: Sender {
    return Sender(id: member.name, displayName: member.name)
  }
  
  var sentDate: Date {
    return Date()
  }
  
  var kind: MessageKind {
    return .text(text)
  }
}

Back in ViewController.swift, add an array of messages above viewDidLoad, as well as a property for the current user:

var messages: [Message] = []
var member: Member!

Now that we have those, we need to connect them to the UI. To update the view, as well as handle user interaction, we need to implement four protocols:

1. MessagesDataSource which provides the number and content of messages.
2. MessagesLayoutDelegate which provides height, padding and alignment for different views.
3. MessagesDisplayDelegate which provides colors, styles and views that define the look of the messages.
4. MessageInputBarDelegate which handles sending and typing new messages.

We'll implement these in a series of four extensions of the ViewController class, starting with the data source. Add this code to the bottom of the file:

extension ViewController: MessagesDataSource {
  func numberOfSections(
    in messagesCollectionView: MessagesCollectionView) -> Int {
    return messages.count
  }
  
  func currentSender() -> Sender {
    return Sender(id: member.name, displayName: member.name)
  }
  
  func messageForItem(
    at indexPath: IndexPath,
    in messagesCollectionView: MessagesCollectionView) -> MessageType {
    
    return messages[indexPath.section]
  }
  
  func messageTopLabelHeight(
    for message: MessageType, 
    at indexPath: IndexPath, 
    in messagesCollectionView: MessagesCollectionView) -> CGFloat {
    
    return 12
  }
  
  func messageTopLabelAttributedText(
    for message: MessageType, 
    at indexPath: IndexPath) -> NSAttributedString? {
    
    return NSAttributedString(
      string: message.sender.displayName,
      attributes: [.font: UIFont.systemFont(ofSize: 12)])
  }
}

These functions are pretty straightforward. First we create a Sender instance from our member. Then, we return the number of the messages. Each section contains a new message, so we simply return the message for that section index. Lastly, we return an attributed text containing the username of the sender for a label above the message.

The next protocol we need to implement is the layout delegate. Since we're not customizing the layout, this will be really easy:

extension ViewController: MessagesLayoutDelegate {
  func heightForLocation(message: MessageType, 
    at indexPath: IndexPath, 
    with maxWidth: CGFloat, 
    in messagesCollectionView: MessagesCollectionView) -> CGFloat {
    
    return 0
  }
}

We're simply returning 0 for the height, and MessageKit will take care of calculating it for us.

To implement the MessagesDisplayDelegate, we'll make sure we set the member's color as the background color of the avatar view.

extension ViewController: MessagesDisplayDelegate {
  func configureAvatarView(
    _ avatarView: AvatarView, 
    for message: MessageType, 
    at indexPath: IndexPath, 
    in messagesCollectionView: MessagesCollectionView) {
    
    let message = messages[indexPath.section]
    let color = message.member.color
    avatarView.backgroundColor = color
  }
}

The last protocol we need to implement is the input bar delegate. This allows us to actually send a new message. For now, we'll just append the message onto the array. Later on we'll actually send it to Scaledrone.

extension ViewController: MessageInputBarDelegate {
  func messageInputBar(
    _ inputBar: MessageInputBar, 
    didPressSendButtonWith text: String) {
    
    let newMessage = Message(
      member: member, 
      text: text, 
      messageId: UUID().uuidString)
      
    messages.append(newMessage)
    inputBar.inputTextView.text = ""
    messagesCollectionView.reloadData()
    messagesCollectionView.scrollToBottom(animated: true)
  }
}

We create a new message with the text provided by the method. We use the built-in UUID class to get a unique string which we'll use for the message's ID. We'll then append that message to the array, and reload the collection view so it updates.

Now we implemented all the protocols we need, but there's still one small step we need to do. We need to tell MessageKit to use ViewController as its delegate for all of these things. Add these lines to the bottom of viewDidLoad:

member = Member(name: "bluemoon", color: .blue)
messagesCollectionView.messagesDataSource = self
messagesCollectionView.messagesLayoutDelegate = self
messageInputBar.delegate = self
messagesCollectionView.messagesDisplayDelegate = self

We'll also hard-code a member to use for testing. Later we'll generate a username and color randomly.

If you run the app now, you'll see that you can send new messages!

Okay, you you're not actually sending the messages to the internet, but you do have a working chat UI. In just a few more minutes, you'll have a fully working chat app.

A Random User

In your production app, you'll probably have a login screen which will authenticate your users. For the purposes of this tutorial, we'll assign a random name and a random color to a user when they launch the app.

We'll implement this as extensions on String and UIColor. Create a new Swift file called Extensions.swift. In the file, add the following extension to get a random name.

import Foundation
import UIKit

extension String {
  static var randomName: String {
    let adjectives = ["autumn", "hidden", "bitter", "misty", "silent", "empty", "dry", "dark", "summer", "icy", "delicate", "quiet", "white", "cool", "spring", "winter", "patient", "twilight", "dawn", "crimson", "wispy", "weathered", "blue", "billowing", "broken", "cold", "damp", "falling", "frosty", "green", "long", "late", "lingering", "bold", "little", "morning", "muddy", "old", "red", "rough", "still", "small", "sparkling", "throbbing", "shy", "wandering", "withered", "wild", "black", "young", "holy", "solitary", "fragrant", "aged", "snowy", "proud", "floral", "restless", "divine", "polished", "ancient", "purple", "lively", "nameless"]
    let nouns = ["waterfall", "river", "breeze", "moon", "rain", "wind", "sea", "morning", "snow", "lake", "sunset", "pine", "shadow", "leaf", "dawn", "glitter", "forest", "hill", "cloud", "meadow", "sun", "glade", "bird", "brook", "butterfly", "bush", "dew", "dust", "field", "fire", "flower", "firefly", "feather", "grass", "haze", "mountain", "night", "pond", "darkness", "snowflake", "silence", "sound", "sky", "shape", "surf", "thunder", "violet", "water", "wildflower", "wave", "water", "resonance", "sun", "wood", "dream", "cherry", "tree", "fog", "frost", "voice", "paper", "frog", "smoke", "star"]
    
    return adjectives.randomElement()! + nouns.randomElement()!
  }
}

We are creating random usernames by combining randomly selected adjectives and nouns. This will give usernames like "hiddensun" or "redstar".

Now we'll do a similar thing, but for getting a random color.

extension UIColor {
  static var random: UIColor {
    return UIColor(
      red: CGFloat.random(in: 0...1),
      green: CGFloat.random(in: 0...1),
      blue: CGFloat.random(in: 0...1),
      alpha: 1)
  }
}

To get a random color, we simply select a random value for red, green and blue. Both of these extensions are using Swift 4.2's new random number generation.

Now that we have those in place, it's time to actually use them. Open up ViewController.swift and in viewDidLoad, change the line where you create the member to the following:

member = Member(name: .randomName, color: .random)

Run your app a few times and send some messages. You should see a different color each time you run the app.

Preparing Your Members

We'll be sending and receiving messages and members as JSON dictionaries, which means we need a way to create them from a dictionary, as well as get a dictionary representation from the model structs. We'll add this to Member by extending it with two new things: An initializer that will create it from JSON, as well as a computed property to get a dictionary from its properties.

Before we do that, we have one problem. Member has a UIColor property, which can't be easily represent as a JSON value. So, we'll use hexadecimal color codes to represent color. A hexadecimal color code looks like this: #FF5733. It has six digits. The first two represent the value of red between 0 and 255 in hex. The second two represent green, while the final two represent blue.

Knowing that, we can convert UIColor back and forth to hex codes with a simple extension. Add this extension to Extensions.swift:

extension UIColor {
  convenience init(hex: String) {
    var hex = hex
    if hex.hasPrefix("#") {
        hex.remove(at: hex.startIndex)
    }
    
    var rgb: UInt64 = 0
    Scanner(string: hex).scanHexInt64(&rgb)

    let r = (rgb & 0xff0000) >> 16
    let g = (rgb & 0xff00) >> 8
    let b = rgb & 0xff
    
    self.init(
      red: CGFloat(r) / 0xff,
      green: CGFloat(g) / 0xff,
      blue: CGFloat(b) / 0xff, 
      alpha: 1
    )
  }
  
  var hexString: String {
    var r: CGFloat = 0
    var g: CGFloat = 0
    var b: CGFloat = 0
    var a: CGFloat = 0
    
    self.getRed(&r, green: &g, blue: &b, alpha: &a)
    
    return String(
      format: "#%02X%02X%02X",
      Int(r * 0xff),
      Int(g * 0xff),
      Int(b * 0xff)
    )
  }
}

For this tutorial, the details of how this works are not really important. The gist is that we take the hex code as a single number, and filter out only the two digits that we need for the color (red, green or blue). We then convert that number into a number between 0 and 1, since that's what UIColor uses.

Now that we can convert our color, let's add the ability to convert between a JSON dictionary and Member. In Message.swift, add the following extension to the bottom of the file:

extension Member {
  var toJSON: Any {
    return [
      "name": name,
      "color": color.hexString
    ]
  }
  
  init?(fromJSON json: Any) {
    guard
      let data = json as? [String: Any],
      let name = data["name"] as? String,
      let hexColor = data["color"] as? String
    else {
      print("Couldn't parse Member")
      return nil
    }
    
    self.name = name
    self.color = UIColor(hex: hexColor)
  }
}

This is typical dictionary parsing code. The json contains two keys, name and color, which contain the username and the hex code for the color. We convert those into Swift-friendly objects and voilà, we have our member.

Connecting To Scaledrone

We prepped all of our ingredients, now it's time to get cooking! Thanks to Scaledrone's iOS SDK, sending and receiving chat messages is really easy.

Before we start making network requests, we need to make sure iOS doesn't stop us. We'll do this by disabling App Transport Security. Open Info.plist in your main target. Add a new key called "App Transport Security Settings". Inside of that key, add one more key called "Allow Arbitrary Loads" and set its value to "YES".

If you don't have a Scaledrone account yet, open up Scaledrone.com and create a new free account. To successfully connect to Scaledrone you need to get your own channel ID from the Scaledrone's dashboard. To do that go to the dashboard and click the big green +Create Channel button to get started. You can choose Never require authentication for now. Note down the channel ID from the just created channel, you'll need it in a bit.

Create a new Swift file called ChatService.swift. In this file, add a new class called ChatService:

import Foundation
import Scaledrone

class ChatService {
  private let scaledrone: Scaledrone
  private let messageCallback: (Message)-> Void
  
  private var room: ScaledroneRoom?
  
  init(member: Member, onRecievedMessage: @escaping (Message)-> Void) {
    self.messageCallback = onRecievedMessage
    self.scaledrone = Scaledrone(
      channelID: "YOUR-CHANNEL-ID", 
      data: member.toJSON)
    scaledrone.delegate = self
  }
  
  func connect() {
    scaledrone.connect()
  }
}

In the initializer, we'll receive the current member as well as a closure that we'll call each time a new message arrives. We'll use that callback to update our view controller with new messages.

We'll create a new instance of Scaledrone, which manages connecting to the service. Remember that channel ID from above? Make sure to pass it here so Scaledrone knows which channel to connect to.

We'll also pass it the data for the currently logged in member. If you have additional data about the user or the client, this is a good way to supply that data, instead of having to send it with each message.

Connecting to Scaledrone is simply a matter of calling connect on the Scaledrone instance. To know what's going on after connecting to Scaledrone, we'll implement the ScaledroneDelegate protocol.

Once Scaledrone connects, we need to enter a room. A room is a group of users that we can send messages to. You listen to those messages by subscribing to a room of a specific name.

extension ChatService: ScaledroneDelegate {
  func scaledroneDidConnect(scaledrone: Scaledrone, error: NSError?) {
    print("Connected to Scaledrone")
    room = scaledrone.subscribe(roomName: "observable-room")
    room?.delegate = self
  }
  
  func scaledroneDidReceiveError(scaledrone: Scaledrone, error: NSError?) {
    print("Scaledrone error", error ?? "")
  }
  
  func scaledroneDidDisconnect(scaledrone: Scaledrone, error: NSError?) {
    print("Scaledrone disconnected", error ?? "")
  }
}

Once Scaledrone connects, we'll subscribe to a room. If there's an error, we'll print it out to the console.

Note: You might have noticed that we named our name Scaledrone room observable-room. You can name the room anything you want, a single user can actually connect to an infinite amount of rooms for all sorts of application scenarios. However, in order for messages to contain the info of the sender, you need to prefix the room name with "observable-". Read more...

To listen to new messages, there's one more protocol we need to implement: ScaledroneRoomDelegate.

extension ChatService: ScaledroneRoomDelegate {
  func scaledroneRoomDidConnect(room: ScaledroneRoom, error: NSError?) {
    print("Connected to room!")
  }
  
  func scaledroneRoomDidReceiveMessage(
    room: ScaledroneRoom, 
    message: Any, 
    member: ScaledroneMember?) {
    
    guard
      let text = message as? String,
      let memberData = member?.clientData,
      let member = Member(fromJSON: memberData)
    else {
      print("Could not parse data.")
      return
    }
    
    let message = Message(
      member: member, 
      text: text, 
      messageId: UUID().uuidString)
    messageCallback(message)
  }
}

When we receive a new message, we'll try to convert it into a String. We then create a Member from the data we received in the function, using the initializer we created earlier. With those two pieces we construct the message, giving it a unique ID. Finally we call the callback so our view controller knows a new message arrived.

Now that we can receive messages, we also need to send them. With Scaledrone, this is really easy: it's just one line of code. Add this function to the bottom of the ChatService class:

func sendMessage(_ message: String) {
  room?.publish(message: message)
}

That's all there is to connecting with Scaledrone! Now let's hook this all up to our view controller.

Final Touches

We'll need to modify ViewController.swift to use the new ChatService we created. First of all, add a property to the top of the class to store the ChatService.

var chatService: ChatService!

Next, add the following code to the bottom of viewDidLoad:

chatService = ChatService(member: member, onRecievedMessage: {
  [weak self] message in
  self?.messages.append(message)
  self?.messagesCollectionView.reloadData()
  self?.messagesCollectionView.scrollToBottom(animated: true)
})

chatService.connect()

When we get a new message, we'll refresh the UI. We'll also connect to Scaledrone as soon as our screen gets loaded.

Finally, in the MessageInputBarDelegate extension, change the contents of the messageInputBar(_:didPressSendButtonWith:) method to just the following two lines:

chatService.sendMessage(text)
inputBar.inputTextView.text = ""

Run the app and send a few messages. If it looks the same as before: that's good! It looks the same, but this time it's actually sending and receiving the message to and from Scaledrone.

Open up another simulator or run the app on a device, and try to send messages. Congrats! You are now talking to yourself. :)

And We're Done!

There you go! With Scaledrone and MessageKit, adding chat to your app is incredibly easy, so you have no excuses left! You can find the full source code on GitHub.

Here are some ideas on features you can add, all using Scaledrone's APIs:

• Who's online
• Currently typing status
• Chat history
• Sending images and attachments
• Authentication

You can find the full source code or run the working prototype on GitHub. If you have any questions or feedback feel free to contact us.

This tutorial only scratched what Scaledrone can do for you and is the ideal basis for any of your future realtime needs.

Where to now?

In Part 2 of the tutorial we learn how to add typing indicators and a list of online members to your app. Check it out!

While SOLID might be old (at least in internet years), they're one of those evergreen pieces of advice that go beyond language or platform specifics. SOLID is an acronym that stands for five guiding principles for OOP programming.

• Single Responsibility Principle
• Open/closed Principle
• Liskov Substitution Principle
• Interface Segregation Principle
• Dependency Inversion Principle

It's not just good advice for OOP, but programming in general.

Single Responsibility Principle (SRP)

The single responsibility sounds deceivingly simple: One class should only have one responsibility. A UserFetcher class that fetches new users. A Payment class that processes purchases in your app. A LocationTracker app that tracks your users location. These are all examples of classes with a single responsibility.

Because they do one thing, these classes are very simple. Just by reading their names, you know exactly what they do. They're also easy to write: knowing exactly what the class is for means you know which methods you need and which of them need to be exposed as public methods.

They're also much easier to maintain. The code of large classes with lots of things to do often gets intertwined like earbuds that have been in your pocket for too long. In order to change or fix something, you first have to meticulously untangle each of the responsibilities just to start thinking about where the problem is.

We often violate SRP because it's easy. The biggest problem is the phenomenon of one little feature. It's a trap we constantly keep falling into: I'll just add this one little feature to the class. If you add that one little feature five times, suddenly it's five little features. With each feature you are exponentially adding more and more complexity. Before you know, you created a huge, tangled mess.

iOS developers are one of the worst classes of programmers when it comes to following SRP. Case and point: our good old friend, the view controller.

What does a UIViewController do? Well, it assembles the views on the screen. It also prepares table view cells. Oh, it also navigates to another screen. Sometimes it also calls network requests. It also, also, keeps track of the state of our screen. A typical UIViewController is about 12 responsibilities removed from SRP. (This problem is often referred to as Massive View Controller.)

This is why view controllers often become those classes that everyone is afraid to touch, and nobody understands what's going on. There are just too many of those one little features.

What can I do?

First off, stop adding little features. Shift your brain to thinking about modules, components and APIs. Get out of the mindset of patching and hacking, and into the mindset of creating libraries. Write small classes that do one thing. If you have a large problem, break it down. Write classes for each subset of the problem, and then write another one that will use those classes.

Identify the responsibilities of your view controller, and split them up. The easiest candidates are table view delegates and data sources. Make a separate class that does that thing. The data source can be any class, not just the view controller.

And always pay attention to the size of your classes. The number of lines can be a very good warning sign that some things should probably be split up.

Open/closed Principle

While SRP is deceivingly simple, the open/closed principle sounds more complex than it really is. It goes as follows: software entities should be open for extension, but closed for modification. Sounds pretty fancy, right?

What that sentence is trying to say is that it should be easy to add new features to your class. Earlier, I mentioned an example of a UserFetcher class as an example of SRP. Let's say that class has one method, fetchUsers, which fetches a JSON of all your users from a database, parses it, and returns it.

class UserFetcher {
  func fetchUsers(onComplete: @escaping ([User])-> Void) {
    let session = URLSession.shared
    let url = URL(string: "")!
    session.dataTask(with: url) { (data, _, error) in
      guard let data = data else {
        print(error!)
        onComplete([])
        return
      }
      
      let decoder = JSONDecoder()
      let decoded = try? decoder.decode([User].self, from: data)
      onComplete(decoded ?? [])
    }
  }
}

But hold on! A super-intelligent race of beings from Mars has invaded earth and taken you hostage! They want you to make the app work with Martian objects, instead of User objects. And they want it fast!

With our UserFetcher class, we need to change the whole implementation, even to the point of renaming the class, for it to work with Martians. If we took a different approach, this change would be a lot easier. What if instead of a UserFetcher, we wrote a generic Fetcher, for any Decodable list of things?

class Fetcher<T: Decodable> {
  
  func fetch(onComplete: @escaping ([T])-> Void) {
    let session = URLSession.shared
    let url = URL(string: "")!
    session.dataTask(with: url) { (data, _, error) in
      guard let data = data else {
        print(error!)
        onComplete([])
        return
      }
      
      let decoder = JSONDecoder()
      let decoded = try? decoder.decode([T].self, from: data)
      onComplete(decoded ?? [])
    }
  }
  
}

typealias UserFetcher = Fetcher<User>

The implementation is almost the same, except we changed where we mention User to a generic T, which conforms to decodable. With this approach, we only need to change that single line at the bottom to support Martians.

typealias MartianFetcher = ListFetcher<Martian>

As you can see, following the open/closed principle might just save your life one day!

Okay, the example with the Mars attack might be a little over the top. But if there's one thing that's constant about requirements, it's that they change. You need to help your future self and allow for easy ways to respond to design changes in the future.

Liskov Substitution Principle

Here's one principle that sounds very mathy and academic. If you think that name is bad, it has another one: substitutability. As in, the ability to be substituted with something else. And that's exactly what this principle means.

LSP says that any function working with a class should work also with any of those class' subclasses. This principle is a note of how you override methods. The user of that method shouldn't be able to see a difference between your version and the base class' method.

Let's go back to our MartianFetcher. The Martians are happy with how the code works on Earth, but they don't like how it works when they go back to Mars: there's no internet there, so they don't see any data. They want offline mode.

So, you go ahead and make a subclass of the Fetcher, which fetches data from a file on the device which contains cached Martians. This is a good idea since creating a subclass means you don't have to change code that works with Fetcher, since the API stays the same.

You're also really scared, so you take your keyboard and you quickly hack that feature into the app.

class FileFetcher<T: Decodable>: ListFetcher<T> {
  override func fetch(onComplete: @escaping ([T])-> Void) {
    let json = try? String(contentsOfFile: "martians.json")
    guard let data = json?.data(using: .utf8) else {
      return
    }
    
    let decoder = JSONDecoder()
    let decoded = try? decoder.decode([T].self, from: data)
    onComplete(decoded ?? [])
  }
}

In your rush, you made a mistake. Here's how the base class' method works: if there is an error, the method calls the completion handler with an empty array. Your version works a bit differently. If there is an error, nothing happens. This means your UI won't update if there is an error. The Martians are angry now.

There are two ways you can fix it, and one of them is wrong. You can go into your view controller and check whether your Fetcher is actually a FileFetcher and update the UI.

fetcher.fetch { martians in
  self.martians = martians
  self.tableView.reloadData()
}
if fetcher is FileFetcher {
  tableView.reloadData()
}

This is wrong. It's wrong because the whole point of a subclass is that you don't have to change the user of the class, but only the subclass. If for every subclass we had to have a different way of using it, then inheritance would be completely pointless. (Same goes for protocols and composition!)

The correct way to fix this would be to align the overridden method to work like the base class' method, or create a whole new class.

Whenever you're checking if an instance is of a specific type, it's probably code smell, and a violation of LSP. And most likely there's an easier way to do things.

Interface Segregation Principle

The Martians are generally happy with your app but they want more features. They want to see the details of a Martian when they click on it. Being the protocol-oriented programmer you are, you create a protocol to deal with this problem.

protocol MartianFetcher {
	func getMartians(onComplete: ([Martian])-> Void)
	func getMartian(id: String, ([Martian])-> Void)
}

You create a class that implements this protocol, and hook it up to your app. But here's the problem: The list screen doesn't need getMartian, and the details screen doesn't need getMartians.

Having methods available that you don't need adds clutter and noise, making it harder to work with the API. It also leads to all the problems discussed in the Single Responsibility Principle section.

You can make a very easy fix that solves this problem. Just make two different protocols.

protocol MartiansFetcher {
	func getMartians(onComplete: ([Martian])-> Void)
}

protocol MartiansFetcher {
	func getMartian(id: String, onComplete: ([Martian])-> Void)
}

You don't actually have to change your implementation, the same class could implement both of these protocols. But in your list view controller you will use an instance of MartiansFetcher, without extra clutter. This lets you add functionality to the class that fetches Martians without complicating things for the users of the class.

This is the reason why Swift has Decodable, Encodable and Codable. Not everyone can conform to all, and not everyone needs all functionality. Apply SRP to your protocols as well as classes.

Dependency Inversion Principle

Here's another principle with a scary name. This principle says that high level things in your app, like your view controller, should not depend directly on low level things, like a networking component. Instead, it should depend on an abstraction of that component. In practice, this means that the view controller should not use a Fetcher class, but a Fetchable protocol.

The reason is to reduce coupling. String coupling occurs when your class depends heavily on the implementation of another class. It might be calling a lot of methods, making assumptions about the inner working of that class, or use variable names that tie it to that specific class.

Strong coupling is bad because it makes it harder to change the code base. If you're using a CoreDataService, and suddenly want to switch to a RealmService, you best hope your view controller doesn't rely heavily on the former.

The way to go around this issue is to use a DatabaseService protocol, that the CoreDataService will implement.

protocol DatabaseService {
  func getUsers()-> [User]
}

class CoreDataService: DatabaseService {
  // ...
}

In your view controller, you pretend that the class doesn't exist, and just use an instance of that protocol.

let databaseService: DatabaseService = CoreDataService()

You do this because protocols are less specific than classes. A class has a specific name and specific methods you can use. On the other hand, protocols are, by definition, abstract. More than one class can implement a protocol, making them perfect for reducing coupling.

To change to Realm, all you need to do is make a new class that conforms to the same protocol. Because you didn't rely on a specific implementation, you don't need to change code in your view controller. It's a huge time saver!

If you think about coupling from the beginning it will save your butt in the long run.

More What You'd Call Guidelines

We went through all the SOLID letters!

One thing to remember is that these principles, while very useful, are not rules. They're tools. As their creator, Robert C. Martin puts it, "They are statements on the order of 'An apple a day keeps the doctor away.'". So keep them in mind, but allow for compromises.

Now you know a few principles to make you a better coder, as well as what to do in the event of an attack from Mars. Happy coding!

Internet technology uses a request/response paradigm that enables a client to request for information and a server to respond. WebSockets, polling and Server-Sent Events are three different technologies that define how browser and client can communicate with each other. In this blog post, we'll focus primarily on the last category, also known as SSE or EventSource. We'll explain what they are, how they work and how they are used in practice.

What are Server-Sent Events?

Before we dive into the specifics of SSE, let's start by examining what SSE is and what it's used for. The name Server-Sent Events is mostly self-explanatory: it’s a technology standard that allows server-to-client streaming of text-based event data over a HTTP connection. The idea is to have the browser receive data automatically from the server without explicitly having to poll for it. SSE makes working with real-time data simple and efficient, using just one, long-lived HTTP connection.

A specific feature of SSEs is that they’re mono-directional, which means that data communication only happens one-way, in this case from the server to the client. This feature comes in handy for use cases where the client doesn't need to send any data and only requires updates through server actions. In this sense, SSE differs from WebSockets that are bi-directional and enable near real-time updates in both directions.

SSE forms part of the HTML5 specification: the official API is named Server-Sent Events EventSource API, hence the popular term ‘EventSource’. It is natively supported in almost all browsers, however Internet Explorer and Edge being the main exceptions. SSEs are sent over traditional HTTP, so there’s no need for additional protocols or server implementations. The SSE standard provides multiple out-of-the-box features that WebSockets lack, such as reconnection handling.
There are many use cases for SSE. As stated above, SSE is generally used for displaying data updates, such as price information or the availability of products and services on a website. It’s also used for chat applications, news updates and automated push mechanisms.

Components of SSEs

After this quick introduction, let's have a better look at the two components that make up SSEs. Next, we’ll describe how they work together using some coding examples. In general, we can distinguish two components that, when combined, enable SSE technology:

1. The EventSource API
2. The Event Stream Protocol

The EventSource browser interface enables the client to receive push notifications from the server as DOM events, while individual updates are delivered through an “event stream” data format.

These components both enable an efficient and cross-browser implementation of XHR streaming, but letting the browser handle all connection management and message parsing.

In the browser, the EventSource API that performs the following tasks: manage the server connection, parse the received data incrementally, identify message boundaries and let the browser fire a DOM event to notify the application. A data stream can be terminated when finished, or resumed using the API’s auto-connect functionality in case the connection is dropped unexpectedly.

Event-stream data (or Server-Sent Events messages) consists of a simple stream of text data encoded in UTF-8. Its specification defines different data fields that are separated by a pair of newline characters: even, data, ID and retry. The data field holds the actual message content that is pushed to the client. Because the data format is well-defined, the EventSource API can do all the work in the browser.

Getting started with SSE

Let’s start with a quick example of an application that uses SSEs. We’ll look at how SSEs are implemented on the client side. The client can be a mobile app and developed in any language that can handle HTTP connections, while the server side can be coded in any language. But first, we'll look at some examples of Server-Sent Events Messages.

Server-Sent Events Messages
Here is a template for single event messages:

id: <messageId>\n
event: <eventType>\n
data: <event data - plain text, JSON, ... >\n
\n
\n

Using this template, we can create the following message:

id: 99\n
event: price\n
data: 99.99\n
\n
\n

Client-side
Here’s a simple client-side implementation of SSE, taken from MDN Web Docs:

const evtSource = new EventSource('sse.php');
const eventList = document.querySelector('ul');

evtSource.onmessage = function(event) {
  const newElement = document.createElement("li");

  newElement.textContent = "message: " + event.data;
  eventList.appendChild(newElement);
}

In the first line, a new EventSource instance is created, that receives server-sent events from a specified URL: in this case, a page called 'sse.php'. In case of an event, an event handler is run after which the message received is written to a new list element and appended to a list already present in the document.

SSEs for high-performance real-time data streams

In this blog post, we discussed Server-Sent Events, or simply SSEs. They are used for high-performance real-time data streams from server to client. We described what they are and mentioned different use cases where they come in handy: since SSEs are mono-directional, they are best used for applications that don't need to send data from the client to the server. Those applications are better served by using WebSockets. SSEs are sent over traditional HTTP and come with a set of handy features for developers. SSEs consist of an EventSource client API that manages the messages sent by the server that are defined in the Event Stream Protocol. Some short examples showed how a template message can be used for a real example showing real-time data. Finally, a code example illustrated SSE implementation on the client side.