DEV Community: Samba Diallo

Serverless Slack Apps and Slash Commands

Samba Diallo — Mon, 10 Feb 2020 20:58:47 +0000

It's crazy to think that I entered the Developer Advocate field almost a year ago. Through that year, I’ve worked to ease the pains that companies and developers had together. I attended meetups, conferences, and hackathons, seeing new companies and products vying for developer attention and adoption. I’ve been happy to work with some of these productivity tools that are hard to go without once used.

Working with serverless technologies has sped up my development over the past year, and I recently used them in creating Slack Apps and slash commands Now come, walk with me, as I show you different methods of serverless and how to search google images via a Slack slash command.

Falling in love with serverless
Serverless development for Slack-ers
Traditional Slack Apps
Boneless Slack Apps
Search Google Images in Slack
How does it look?

Falling in love with serverless

Some favorite tools of mine that take a lot of work off my shoulders are serverless platforms. The fact that I don’t have to worry about where or how my code is hosted is amazing to me. Even compared to setting up cloud containers, it’s a whole different ball game.

Although a few serverless providers have become household names in my stack, I’ve only started using them within the last year. Now given the chance between handling the server set up myself or utilizing a cheap/free trial of a serverless API, I’ll always choose the latter. When my project needs to scale, the serverless providers can handle it and they provide a much-needed abstraction over standard cloud providers.

My personal choice for Slack app development is Nimbella Commander, a Slack app that allows you to create serverless functions and connect these functions to your Slack environment. This handles much of the integration and infrastructure that other serverless platforms do not touch. We'll discuss creating Slack Apps using both the traditional serverless platforms and using Nimbella Commander.

Serverless development for Slack-ers

My foray into serverless applications was rewarding, being able to develop my projects using various Functions as a service (FaaS) products was a breeze. My next step was leaping, unhindered by servers, into Slack App development.

I’ve used Slack through college, and it played even more of a role in my life since I joined the workforce. Slack provides a platform to create apps, some of which integrate other services into your favorite team collaboration chat environment. Creating an app inside it requires some research into the Slack API and a way to process and send information to the endpoints provided by Slack. That last section, your code that connects to your Slack workspace via the Slack API, doesn't have to be your traditional hardware in a basement solution. We can use a serverless option to run our application in Slack.

Traditional Slack Apps

Using a serverless solution to connect to your Slack app can save you time, money, and worry. These benefits are similar to making the original switch from a traditional server/cloud platform. Worrying about scaling with your user base is a thing of the past, but you can also skip setting up the connections and storage of your cloud providers. By ignoring the setup time, it allows us to focus more on the use of each serverless function.

Your code, in the serverless cloud providers environment, will directly call the Slack API. The functions you create will need to manage authentication (OAuth 2.0), enable user interaction, and need to implement each feature of your Slack App. This method is already light years better than provisioning your servers and organizing the multitude of clusters your growing app will need. It will take work to start the connection to Slack and it is harder to get someone else set up with your code, but this method can be rewarding and allow complete customizability.

Boneless Slack Apps

I’ve especially enjoyed our third option for serverless Slack App development discussed above, Nimbella Commander. An app that helps you create other Slack apps? It takes care of all of the infrastructure that your app needs when thrown into a Slack community. It allows for the same mindset when developing these serverless functions, but lets you forget about parameter parsing, authentication/logging in, and has other features like automation, logs, and access control. It’s easy to get it set up and you can create your first slash command in a couple of minutes.

For those who help manage their businesses' cloud infrastructure, there are command sets that integrate with AWS, DigitalOcean, and Vultr. These DevOps commands are already hosted publicly on GitHub. If you wanted to get started with a simple way to integrate your code/API into the Slack environment without building the Transcontinental railroad of infrastructure please try it out.

Search Google Images in Slack

To query Google programmatically, we need to complete a few steps:

Create a Custom Search Engine
Get a Google JSON API key
Setup your serverless environment
Google API Call
Formatting!

Create a Custom Search Engine

Google doesn't provide an API to search google but will let you create your custom-defined search engine, specifically limiting the search to particular sites you define. We don't want this, but we can do a little hacky magic to navigate around that roadblock. Check out Google's full Custom Search Engine tutorial for more details, but I'll quickly go over what you need to know below.
First, create a custom search engine with the sites to search as any random website you want (I used www.google.com). It doesn't matter what you put in this field, as long as you can create your custom search engine.
After creating your CSE, click the bottom button that takes you to the control panel. Make sure that ImageSearch is enabled, and delete the sites listed under "Sites to search". This was the "hacky magic", we tell google we want to search that site, but then delete it. Your CSE is now not limited to any specific sites.

The last thing we need from this page is the Search Engine ID. Make sure its handy for when you need it soon!

Get a Google JSON API key

Check out the Custom Search JSON API to get a key from Google. You'll need a project for this key to be under so make sure you can create one on your account.

Setup your serverless environment

It's time for you to set up your serverless environment and its connection to Slack. I'll be using Nimbella Commander so I don't have to worry about any setup besides making sure I'm an admin in my workspace, adding it to Slack, and using /nc dapp_add to set up the default app. Review the Nimbella Commander documentation for more detail while setting up.

Once we have dapp installed, we can create our command. We'll want to allow users to input a query along with the index of the image in the results. If we search the same thing and take the same index of the results we'll often get the same result. Allowing the user to type in an image index gives them choice. Create this command with /nc command_create g_image <search> [<i_index>].

Nimbella Commander will give you a link to access their code editor. I usually develop in my IDE of choice (VSCode ftw) and then insert my code into their editor. Let's get started writing this command!

Google API Call

With our editor open, we can now insert our code! I'll first show you the platform-agnostic API call.

let url = "https://content.googleapis.com/customsearch/v1?cx=" + customSearchEngine + "&q=" + search + "&searchType=" + "image" + "&key=" + googleSearchKey;
let str = await getContent(url);
let searchJSON = JSON.parse(str);
let images = searchJSON.items;

You need to be sure to insert your CSE ID, the search term from your use, and your Google Search JSON key into the URL. This also parses the JSON we receive and puts all the items into images.

While using Nimbella Commander, you can place your API keys into encrypted storage so there's no chance of anyone accidentally posting them to GitHub. I did so by following the documentation.

I also use an async function named getContent to create and handle GET requests as well.

const getContent = (url, headers) => {
  // Return new pending promise
  return new Promise((resolve, reject) => {
    const request = require('https').get(url, {
      headers
    }, response => {
      // Handle http errors
      if (response.statusCode < 200 || response.statusCode > 299) {
        reject(
          new Error('Failed to load page, status code: ' + response.statusCode)
        );
      }

      // Temporary data holder
      const body = [];
      // On every content chunk, push it to the data array
      response.on('data', chunk => body.push(chunk));
      // We are done, resolve promise with those joined chunks
      response.on('end', () => resolve(body.join('')));
    });
    // Handle connection errors of the request
    request.on('error', err => reject(err));
  });
};

Formatting!

Before we get into organizing how our response looks to the user, let's make sure we handle if the user inputs an image index that's either too high or low.

const {
  search,
  num,
} = params;
const {
  customSearchEngine,
  googleSearchKey
} = secrets;


let index = 0;
if (num) {
  if (num > 9 || num < 0) {
    return {
      response_type: 'in_channel', // or `ephemeral` for private response
      text: "Please choose an image range between 0 and 9"
    };
  }
  index = num;
}

If they do, we just return a message explaining the range we accept.

The Slack API has tons of ways to interact and show off your content to users. Sending messages back to users after they call your slash command is one of the most direct and easy interactions you can create. Check out the Message builder or the Block Kit builder for all of your options on message formatting.

My message formatting looks like this.

return {
  response_type: 'in_channel', // or `ephemeral` for private response
  blocks: [{
    "type": "image",
    "title": {
      "type": "plain_text",
      "text": images[index].title,
      "emoji": true
    },
    "image_url": images[index].link,
    "alt_text": images[index].title,
  }]
};

It's meant to be simple, it uses the Block Kit builder to include the image title and the URL of the image. Slack automatically renders the image and posts it in the channel you called it in.

My full file for the g_image slash command is located on GitHub. It has everything you need to run the command, besides your Google API information.

How does it look?

Here's an example of me running my g_image command in Slack with Nimbella Commander. I type the name of our app, the name of the command, and then our parameters.

I can choose the index of the image I want, so I don't get the same first image every time. A next step would be to allow randomization of results as well!

I'd love to see what type of serverless integrations you can create with Slack.

Rustifying Chat: Create a Terminal UI Chat App in Rust

Samba Diallo — Thu, 15 Aug 2019 17:25:10 +0000

The coding world is rich with new languages and frameworks, and one growing in popularity is Rust. You’ve probably heard about it, somewhere between Stack Overflow and programming-focused Twitter accounts.

I won't put you through a sales pitch on Rust itself, after all, this Stack Overflow poll speaks for itself. However, I do want to show how to integrate Pub/Sub messaging into your Rust project by creating a Rust chat app.

Follow along with the tutorial or check out the full source code on GitHub.

What is Publish-Subscribe?

Publish-Subscribe, or Pub/Sub is a way for services and clients to communicate with each other in realtime. One common use case of Pub/Sub in Rust is to connect multiple devices or servers and reflect any changes or updates across them simultaneously. One can use these payloads to update systems, send chat app messages, live geolocation tracking and more. Another use is networking in Web Assembly, a pre-compiled binary format that will replace JavaScript in the browser. This will enable developers to make website front ends with another language besides JavaScript. Instead of having to interpret JavaScript at runtime, it compiles other programming languages to binary before the page loads.

There are a few Pub/Sub API’s out there; I’m going to use PubNub. The reason why I use it with Rust is that it has a simple REST API that I can leverage. While also providing pre-written, open-source API integrations, it provides a solid infrastructure for my use case.

Take the first step in creating this project by obtaining free PubNub API keys.

Setting Up a Rust Environment

When starting to develop with Rust, I found the compiler to be extremely helpful. Aside from running your code, it tells you where and what you’re doing wrong, and it will tell you why if you ask it! Let’s get it installed by typing curl https://sh.rustup.rs -sSf | sh into your terminal.

Once that finishes, navigate to where you want your new Rust project to live and type cargo new rustychat

Now navigate into your project and use cargo run to run your project!

Now that you have a project set up, let's go over some of the files inside of your project.

The file “Cargo.toml” is similar to a package.json from Node.js. This is where you’ll put all your crates (libraries), and when you build your project, they’ll be installed. If you’ve installed iOS frameworks with Cocoapods, listing these dependencies will feel similar.

Inside here, under dependencies, you should include the six crates that our app uses. The libraries will allow us to:

Send GET requests
Define custom error types more easily
Construct and destruct JSON objects
Derive custom structs from JSON
Create a custom Terminal UI
URL encode our requests

[dependencies]
reqwest = "0.9.18"
custom_error = "1.6.0"
serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] }
cursive = { version = "0.12.0", default-features = false, features = ["pancurses-backend"] }
percent-encoding = "1.0.1"

Your Cargo.toml should now have all of the crates we plan on using. When we build our project, Rust will automatically install these dependencies.

The next file is src -> main.rs, your main Rust code file. Here is where your main function is, in addition to “imports” of crates and the defining of structs.

Above your main function, insert these lines to gain access to the crates you just listed as dependencies. Include some crates that come standard in Rust.

extern crate reqwest;
use percent_encoding::{percent_encode, PATH_SEGMENT_ENCODE_SET};
use serde::{Deserialize, Serialize};
use std::sync::mpsc::{channel, Sender};
use std::thread;
use cursive::align::HAlign;
use cursive::traits::*;
use cursive::Cursive;
use cursive::view::ScrollStrategy;
use cursive::views::{BoxView, Dialog, DummyView, EditView, LinearLayout, ScrollView, TextView};
use custom_error::custom_error;

If you run your code again, it should build all the crates, and then output “Hello World.”

Create a Custom Error

When taking risky actions in code, you should write error handlers to gracefully marshall code execution gone awry. This is why I used custom_error, a crate that reduces the boilerplate needed in normal Rust for creating errors. We define the type, and for each type of error we expect, we can return a description.

In our code, we’ll be turning an object into a JSON string (and vice-versa), making a GET request to a URL, and accessing what comes back as a response. All three of these are risky and might fail, but we can recover. Once we detect an error, create a description to output in the terminal.

Look below for an example of the errors that I cover and how I define them.

custom_error! {ChatError
    JSONError{source: serde_json::error::Error} = @{
        source.to_string()
    },
    ReqwestError{source: reqwest::Error } = @{
        source.to_string().split(": ").collect::<Vec<&str>>()[1]
    },
    Unknown = "unknown error"
}

Define Structs for Rust JSON Response

In this section, we will define a few structs that represent a JSON response that we get from PubNub. We’ll have four structs that each represent one layer of the response object we receive.

Response holds a Time and a vector of MessageResp. Time holds a time token string, MessageResp holds a Message, which has a UUID string field and a text string field. Each of these fields needs to be deserializable. This allows us to throw the JSON response into a Response struct, and it’ll take care of organizing the data. Message also needs to be serializable to turn it into JSON data.

#[derive(Deserialize)]
struct Response {
    t: Time,
    m: Vec<MessageResp>,
}

#[derive(Deserialize)]
struct MessageResp {
    d: Message,
}

#[derive(Deserialize)]
struct Time {
    t: String,
}

//Message is a sub object of MessageResp
#[derive(Serialize, Deserialize)]
struct Message {
    uuid: String,
    text: String,
}

Asynchronous Rust: How to Multithread

Our main function in this project will create two threads: a thread that searches for new messages arriving and a thread for our UI. Let’s start with making our program use multithreading. Making our program run on multiple threads allows for us to block one thread waiting for messages while the user can still type new messages in the chat input.

The app runs on one thread, going line by line, by default. We can create a second thread that runs the subscribe loop at the same time. Before we create this second thread, how would we access its data on the main thread?

That’s where the channel comes in. It creates a sender and a receiver, also known as a producer and consumer. The sender can be cloned but the receiver cannot, allowing the receiver to access messages in the order they were sent.

Create two separate channels, one is to send a channel from the UI to the subscribe thread, and the other is to send messages from the subscribe thread to the UI.

fn main() {

    //We create two channels, one to pass the channel name to the subscribe function 
    //Another to send new messages from the subscribe function to the UI 
    let (channel_sender, channel_receiver) = channel();
    let (mut msg_sender, msg_receiver) = channel();

    //... 
    //REST OF THE MAIN FUNCTION 
}

Now create a thread using spawn, which is the simplest way to create new threads in Rust. We put the keyword “move“ before the callback to take ownership of the channel receiver and message sender. Inside the new thread, create an empty string that we’ll use for our initial time token. To subscribe, we need a channel from our UI. Our UI will send a channel once the user submits one, but until then, we should halt our thread.

The great thing about using channels is that we have the option of waiting for information to be sent. Let’s use the “recv()“ function on our receiver, which waits for a single value to be passed through the channel.

//... 
//INSIDE MAIN
//Create a seperate thread, this allows us to have a subscribe loop that wont stop the UI from updating
let _handle1 = thread::spawn(move || {
  let mut time_token = "".to_string();
    //We wait for the UI to send us the channel name
    let test_channel = channel_receiver.recv();
    //...
    //REST OF THREAD
}
//...
//REST OF MAIN

When we receive a variable from another thread, we don’t know if it is an error or not. If the value is “Ok,” unwrap it into a string. Let’s create our subscribe loop! Use the “loop“ keyword to create an infinite loop.

//...
//INSIDE THREAD
if test_channel.is_ok() {

    let channel_name: String = test_channel.unwrap();
    loop {
        //...
        //REST OF LOOP
    }
}

The next step will be to call our subscribe function. It’ll return a Result enum of String, and ChatError. Results contain values wrapped in either an “Ok” or an “Err.” If the action went well, then an “Ok” will return, but “Err” will return if there was an error. You can check if the result is an error or a success, and additionally see what the value is by unwrapping it. The subscribe function will borrow the time token, a mutable version of the message sender, and the channel name.

//...
//Loop
let result: Result<String, ChatError> = subscribe(&time_token, &mut msg_sender, &channel_name);

We haven’t created this function yet, but I’ll walk you through it soon. All that we need to know right now is that the function might return an error. Let’s handle both cases.

If our subscribe Result went smoothly, “result.is_ok()“ should return true. If so, unwrap it and assign your time token to its value.

if result.is_ok() {
    //We update the time_token var to get all messages that happened after that specific time.
    time_token = result.ok().unwrap();
}

If it did not go well, don’t start worrying about alerting the user yet; it might be a ‘timed out’ error. This is expected every so often if there were no new messages.

Because PubNub’s REST API uses HTTP Long Polling, time outs mean that nothing new happened. If it did not time out, then we should print the error and then break out of the loop. This cancels our program. That’s the end of our loop, if we receive a time token or a timeout error from our subscribe function then we start the loop over.

else if result.is_err() {
    let err = result.unwrap_err();
    //If the request times out, thats okay, we just restart it with that same time token, looking for new messages.
    if err.to_string() != "timed out" {
        println!(
            "Error: {:?} \nPlease restart application to try again.",
            err.to_string()
        );
        break;
    }
}
//...
//END LOOP
//END IF
//END THREAD

It’s time to pause on the main function now that we finished our subscribe loop. It’s time to delve deeper into subscribing by actually creating the function.

PubNub REST API

Since we already obtained our keys, let’s learn how we’ll use PubNub in Rust.

PubNub has a REST API, which allows us to access Pub/Sub and more with just HTTP GET requests. Check out the REST API with HTTP GET docs for more information.

The PubNub REST API allows developers to publish messages and to subscribe to channels using HTTP requests. Having low-level control over requests lets you decide how often to make the subscribe calls and whether calls will be asynchronous or not. For this chat app, we’ll be making subscribe calls as soon as our previous one ends so users can still interact with other parts of our app.

Check out the diagram below to understand the flow of information in our app.

We’ll be using the Publish and Subscribe URLs in our app, each in its function. I’ll first give instructions on subscribing, then we can use some of the similar concepts to publish.

Subscribing to a Channel in Rust with a REST API

This section will be a guide for creating a request to PubNub for Pub/Sub Subscribe. Through this, we’ll have a better understanding of how PubNub works with Rust. We’ll learn how to message data from this thread to the UI.

Function Definition

As we saw earlier, our function borrows a time, a sender to a channel, and a channel name. It returns a Result that either contains a String or a ChatError, which we defined at the beginning of our project. This allows us to define what might go wrong in our code, and what to do in each situation

fn subscribe(time: &str, msg_sender: &mut Sender<String>, channel: &str ) -> Result<String, ChatError> {
    //...
    //Subscribe Function
}

Create the URL String

The first step in these functions will be to create the URL string. To do this, we use the macro function format and the crate percent-encoding. Using “format” makes it easier to create URLs with variables. The percent-encoding package lets us convert our objects into URL encoded strings.

In each request, there is a spot to put your subscribe key and channel name. We include a time parameter in the end, even though we won’t always have one. We don’t always pass one to the subscribe function. We always receive one in a successful response from PubNub.

//...
//In subscribe
//Format the URL
let url = format!(
    "https://{host}/v2/subscribe/{subkey}/{channel}/0/{time}",
    host = "ps.pndsn.com",
    subkey = "INSERT_SUB_KEY_HERE",
    channel = percent_encode(channel.as_bytes(), PATH_SEGMENT_ENCODE_SET),
    time = percent_encode(time.as_bytes(), PATH_SEGMENT_ENCODE_SET),
);

Call the reqwest::get function

Once we have the URL we want to request messages from, we call it using “Reqwest.” Reqwest is an abstraction over Hyper: a lower level Rust crate for making network requests. This function may return the information we want, but it also may give an error. This is where our functions’ Result return type plays a role. If something goes wrong, it’ll return an error.

let mut resp = reqwest::get(&url)?;

When using reqwest::get, we leave a question mark at the end. This means that if this call fails, the subscribe function will return an "Err" value. Instead of having to tell our functions to return an "Err" with custom error information on the inside, they will do it automatically.

Successful Response – JSON to Object

If the status of the response is successful, we can dive into what we received. We defined a few structs at the beginning of the file that will help us access the information inside! One of the crates we packed makes this deserialization process painless. We use serde_json to turn our response’s text into a nice object, that’s easy to access the information. This process also might fail, but we already have that error handled with ChatError.

if resp.status().is_success() {
    let deserialized: Response = serde_json::from_str( & resp.text()?).unwrap();
    //...
    //Rest of If 
}

We sometimes won’t receive one message in the response, so let’s iterate through the Vector inside of it. For each of the messages, we’ll use our Sender to pass each message’s information. I create a string from the two values we get from each, a UUID and text. Be sure to unwrap the statement afterward. After iterating through the messages we can return the new time we received in an "Ok".

//...
//In if statement
for m in deserialized.m {
    //Send the new message to the UI above.
    msg_sender
        .send(format!("{} : {}", m.d.uuid, m.d.text))
        .unwrap();
}
return Ok(deserialized.t.t);
//End of if

If the response did not succeed, put an “Ok” Result at the end of the subscribe function. Give it the original time that was passed in, which is converted to a string.

Ok(time.to_string())
//End of subscribe

Errors

Did you notice that we didn’t include any Err statements? All our errors are handled by ChatError. We do include some filled “Ok” statements, which allow us to pass some information back to the calling function and say “Hey, things went fine!”

Publishing Messages in Rust

After creating our subscribe function, let’s create another function to publish to PubNub. This function will follow most of the same format as the last one, but there are a few small changes.

Function Definition

This function will accept 3 strings as parameters. They are the text we want to send, the UUID of the sender, and the channel name. Just like the previous function, we return a Result, but this time it’s an empty “Ok”, or a ChatError Err.

fn publish(text: String, uuid: String, channel: String) -> Result<(), ChatError> {
  //...
    //PUBLISH FUNCTION
}

Object to JSON

At the beginning of this function, let’s create a Message with a couple of the parameters provided. We’re going to do the opposite of the subscribe function, but this time we’ll turn our object into a JSON string. This might return an error, so leave a question mark at the end and our ChatError will take care of it.

//...
//In publish
let message = Message { uuid, text };
let m_json = serde_json::to_string(&message)?;

Create URL String

This will be quite similar to the subscribe function, just adding and swapping some parameters. Replace ‘subscribe’ with ‘publish’, include your publish key, and replace time with a message. Both the channel and the message need to be URL encoded as well.

let url = format!(
    "https://{host}/publish/{pubkey}/{subkey}/0/{channel}/0/{message}",
    host = "ps.pndsn.com",
    pubkey = "INSERT_PUB_KEY_HERE",
    subkey = "INSERT_SUB_KEY_HERE",
    channel = percent_encode(channel.as_bytes(), PATH_SEGMENT_ENCODE_SET),
    message = percent_encode(m_json.as_bytes(), PATH_SEGMENT_ENCODE_SET),
);

Create GET Request

Make a GET request and put a question mark after the call. Put an “Ok” Result on the next line. Once these are complete, we’ve finished our publish function!

let _resp = reqwest::get(&url)?;
Ok(())
//End of publish

Create a Terminal UI using Cursive

What is a TUI?

We’ve learned how to use PubNub’s REST API and we also created a separate thread to long poll PubNub for new messages. So far, we look for messages on a channel and we send those new messages somewhere. We haven’t defined where we get the channel from and where the new messages go. Both of these have much to do with the user interface.

While it is possible to create a command-line based chat, using a Terminal User Interface makes the experience much cleaner and smoother. I used Cursive, a simple and feature-rich TUI that lets us separate the input from the output.

Channel and Username Input

To initiate Cursive, you need to create a mutable instance of its default function.

//Below end of _handle1 thread
let mut siv = Cursive::default();

Cursive uses a format that is reminiscent of other methods of UI creation, namely using Views. Views can hold other views and have different uses. Views at the very base are contained by layers. These are the windows that can be added or popped.

Create a layer, and pass it a Dialog. A Dialog is a type of window that can hold another view. It should be around a LinearLayout view, which we can set to a vertical orientation. LinearLayouts are great for organizing child views into stacks or rows. You can add children to it with the “child“ function, and it can be chained any number of times. You can also use “with“ to dynamically add in children. We’ll use that later, but for now, let’s design our connection layer inside the LinearLayout.

siv.add_layer(
    Dialog::around(
        LinearLayout::vertical()
        //...
        //LinearLayout's children
    )

    //...
    //Title and buttons of Dialog
);

We are going to use a few different views to create this layer. We use TextViews for short lines of text, like a label. EditViews let users enter information, which we can later access with a specific ID. DummyViews are useful to space out our other views. You can design these how you want in your space, but I center the TextViews and set the EditViews width to 20. In addition to setting the styles, make sure you set an ID to each EditView AFTER “new()“, but before “fixed_wifth(20)“. If the ID is not in that spot, then we will not be able to reference that value later on. The Dummy Views are useful to space out items.

//...
//LinearLayout's children
.child(DummyView.fixed_height(1))
.child(TextView::new("Enter Username").h_align(HAlign::Center))
.child(EditView::new().with_id("username").fixed_width(20))
.child(DummyView.fixed_height(1))
.child(TextView::new("Enter Channel").h_align(HAlign::Center))
.child(EditView::new().with_id("channel").fixed_width(20))

After the LinearLayout is complete, finish up creating the Dialog. Add a title to the Dialog, create an “Okay” button with a callback, and a quit button. Finally, align it in the center. We’ll go into the “Okay” button’s callback next.

//...
//Attacched to Dialog
.title("PubNub Chat")
.button("Okay", CALLBACK )
.button("Quit", | s | s.quit())
.h_align(HAlign::Center),

Connect to a Channel

Inside of the “Okay” button, we have the option to provide a callback. This runs when the user either clicks or presses enter on the button. We want to use the “move“ keyword again to allow this callback ownership of all the variables it needs.

.button("Okay", move | s | {
    //... 
    //Okay callback
}

Let’s grab the values that the user entered into the EditViews earlier.

//Inside Okay
let channel = s
    .call_on_id("channel", |view: &mut EditView| view.get_content())
    .unwrap();
let username = s
    .call_on_id("username", |view: &mut EditView| view.get_content())
    .unwrap();

Check if the username is empty, and if so, create a layer telling the user to enter a username. If it does not, then check if the channel name was empty. If it was, set it to “global” as a default.

//Checking if username input is empty.
if username.is_empty() {
    s.add_layer(Dialog::info("Please enter a username!".to_string()));
} else {
    let new_channel =
        if channel.is_empty() {
        "global".to_string()
        } else {
            channel.to_string()
        };

    //...
    //The rest of connecting to PubNub
}

Continuing in that same else statement, let’s send the channel that we have (either “global” or a user-defined channel) to the subscribe loop. Once we do this, our loop will be able to proceed, and request messages from PubNub. Before we load the next screen, pop the initial layer.

channel_sender.send(new_channel).unwrap();
s.pop_layer();

Create the Chat Layer

Create another layer now, this will be a BoxView with a fixed size of 40, 20. Inside of that box will be a Dialog with a title. It has a content field. It’ll be aligned in the center, with a send and a quit button.

//...
//Still in else statement
s.add_layer(BoxView::with_fixed_size((40, 20),
    Dialog::new()
    .title("PubNub Chat")
    .content(
        //...
        //Chat view: Includes list of messages and EditView
    )
    .h_align(HAlign::Center)
    .button("Send", CALLBACK)
    .button("Quit", | s | s.quit()),
))
//End of UI design

I'll first show how to design the content, then I'll show how to send a message. Inside the content function of the Dialog, insert a LinearLayout. This is to stack a Scrollview and an EditView on top of each other. Inside of the ScrollView, we insert another LinearLayout. This extra LinearLayout is so we can remove extra lines if we’d like. Some other views do not provide this functionality. Make the ScrollView stick to the bottom when new messages are received, using scroll_strategy.

//Inside Content
LinearLayout::vertical()
    .child(
        ScrollView::new(
            LinearLayout::vertical()
            //Children of the LinearLayout
        )
        .scroll_strategy(ScrollStrategy::StickToBottom),
    )
    //Next Child

Inside of this second LinearLayout, we have DummyViews on the top and bottom, with the with child between. It provides a reference to the LinearLayout and we can add children dynamically. Add some DummyViews, I chose 13, a number that works well with our layers height. We add these empty lines so that when new messages come in, they appear at the bottom first. Set the LinearLayouts ID to “messages” or whatever you want.

//Children of inner LinearLayout
.child(DummyView.fixed_height(1))
//Add in a certain amount of dummy views, to make the new messages appear at the bottom
.with( | messages | {
    for _ in 0. .13 {
        messages.add_child(DummyView.fixed_height(1));
    }
})
.child(DummyView.fixed_height(1))
.with_id("messages"),

At the end of the first LinearLayout add an EditView child with the ID of “message.”

//Child of first LinearLayout
.child(EditView::new().with_id("message")),
//End of content

Publishing a Message

Now that we’ve designed our chat view, let’s work on sending some messages! Just like our “Okay” button from the previous layer, we want a callback and to move all the required variables into it.

.button("Send", move |s| {
  //...
    //Rest of the callback
}

Take the message from the EditView, as we did before, and check if it’s empty. If it is, then alert the user and tell them to type a message. If it is not empty, then we check if the channel that they entered is empty or filled, like we did above.

//Inside callback
let message = s
    .call_on_id("message", |view: &mut EditView| view.get_content())
    .unwrap();
if message.is_empty() {
    s.add_layer(Dialog::info("Please enter a message!".to_string()))
} else {
    let new_channel_2 = if channel.is_empty() {
        "global".to_string()
    } else {
        channel.to_string()
    };

    //...
    //Will handlee publishing messages
}
//End of callback

Call our publish function with the message, the username, and the channel names that the user entered. If the result was an error, then we tell the user that we encountered an error while publishing. If it went well, then we clear the text from the EditView.

//In the else statement
let result = publish(message.to_string(), username.to_string(), new_channel_2 );
if result.is_err() {
    //If there was an error then we say that there is one, and don't do anything.
    s.add_layer(Dialog::info("Error Publishing".to_string()));
} else {
    //Clear out the EditView.
    s.call_on_id("message", |view: &mut EditView| {
        view.set_content("")
  }).unwrap();
}
//End of else + callback

Inserting New Messages Into UI

Usually, we would use the command “siv.run()“ to have the UI start, but since we want to control when the UI changes we use “siv.refresh()“ instead. Create a new variable to count how many messages we receive, and refresh the UI after it updates.

//...
//After creating the UI design/layers
let mut message_count = 0;
siv.refresh();

Create a loop that first calls “step” to increment through the UI event loop. Check if cursive is running at that point, and if it’s not, break out of the loop. Create a variable to track whether there needs to be a UI refresh and set it to false.


loop {
    siv.step();
    if !siv.is_running() {
        break;
    }

    let mut needs_refresh = false;

    //...
    //Handle new messages
}

Now for the final requirement, we need to check if any messages are waiting for us in the channel queue. We can use a non-blocking method on the “msg_receiver“ to see if anything is waiting. If there are messages, it will return an iterator. We can use a Rust for loop to iterate through the messages.

for m in msg_receiver.try_iter() {
    //...
    //Adding each message "m" in
}

Inside of this for loop, we access the LinearLayout with the ID “messages”. We can then set our refresh boolean to true, add one to the message count, and add the message as a child to the LinearLayout. In that loop, you can also remove the first child. This is to avoid a scroll bar from appearing until the messages go past the screen! Be sure to check if the message count is less than or equal to your DummyView count plus one.

//Inside of for loop
siv.call_on_id("messages", |messages: &mut LinearLayout| {
  needs_refresh = true;
    message_count += 1;
    messages.add_child(TextView::new(m));
    if message_count <= 14 {
        messages.remove_child(0);
    }
});

If our refresh boolean is true at the end of the loop, then we can refresh the UI and show the changes.

if needs_refresh {
    siv.refresh();
}
//End of loop
//End of Main

After completing the main function, the chat app finished. If you enter cargo run into your terminal, A UI will pop up asking for a username and channel name. Entering at least a username will allow you to connect to either the channel you entered or "global" as a default. If you enter a message and click "Send", the message will appear on your screen. Open up multiple command lines and chat in between them, or chat with others if they have access to the same keys as you.

Next Steps

In this tutorial, we created a terminal chat app in Rust. It uses PubNub’s Pub/Sub to send and receive messages through a Cursive Terminal UI. This is only an example of what is possible with Rust and PubNub. If you’re using Rust to compute an algorithm, or run a game, and you need some I/O around the world, PubNub can help.

Want to try this in another language? PubNub has over 75+ SDKs and hundreds of tutorials.

Build a Swift Chat App

Samba Diallo — Thu, 27 Jun 2019 22:19:33 +0000

Mobile chat of all shapes and sizes, whether it be a standalone group messaging app, an embedded customer service widget, or private 1:1 chat in a dating app, is everywhere.

In this tutorial, we’ll show you how to create an iOS mobile chat app with Swift 5, allowing any number of users to chat in realtime. We’ll also show you how to store message history, so when a user leaves and returns, their messages are still in the app.

To create this, we will use a few key features of PubNub: Publish/Subscribe and Storage & Playback (message storage).

Publishing is how each client gets its message out to the world, or at least to the channel that it publishes to. It’s the beginning of using Pub/Sub, each message you send will be delivered to anyone subscribed to the channel you publish to. Publishing requires an instance of a PubNub connection (I’ll go into more detail later), the message (of types String, NSNumber, Array, and Dictionary), and the channel we want to send our message to. Find out more on Publishing in Swift.

Subscribing is the second half of communicating instantly via PubNub. In order to subscribe, we’ll need an instance of a PubNub connection and a channel to subscribe to. After successfully subscribing, we will receive messages, but we still won't see them as we have nothing to handle when they arrive. Find out more on Subscribing in Swift.

Event Handling or listening for updates is quite important in the life cycle of PubNub. Pub/Sub takes the spotlight but the hidden champions of using PubNub are the event handlers that connect the Data Stream Network to our console and app. One that specifically listens for messages and another that looks out for anything else including subscription changes and errors.

Storage & Playback is another great addition to a roster chock full of features. If storing and retrieving messages is import to your use case, Storage & Playback is also a great addition to your app. Its functions allow for retrieval of historic messages. The time-to-live for an app’s messages range from the beginning of time to within the last day. We will set the time-to-live of storage in the PubNub Admin Dashboard once we set up our PubNub account and get our API keys. Find out more on Storage & Playback in Swift.

After this tutorial, you will have an app that provides a chatroom service and is a great base and addition for any app.

The full iOS chat app with Swift 5 is available here.

Creating a App with PubNub in Xcode

PubNub

If you haven't yet, sign up for a PubNub account. Once you’re logged in, create a new app. Click on it and either create a new keyset or click on the demo one available already. You should now see a publish and subscribe keys, these are what allow us to use the PubNub API.

Under the keys, we have different options that we can enable! Let's enable Storage & Playback near the bottom left. We’re at the point where you can decide how long you want your messages to be retained for. I chose a one-day retention length and saved the changes. Under the retention setting, there are settings to enable delete from PubNub history.

Xcode App Setup

Open up Xcode and create a new project, make it a Single View App, name it, and then close the project. Navigate to your project folder using Terminal and either run the command gem install cocoapods or gem update cocoapods if you already have cocoapods installed.

Enter touch Podfile into your terminal to create the Podfile for your app then go ahead and open the file using open Podfile.

Enter this into the file, making sure to replace the “application-target-name” with that of your project.

source ‘https://github.com/CocoaPods/Specs.git'
# optionally complete and uncomment if compilation issues arise
# project ‘<path to project relative to this Podfile>/<name of project without extension>’
# workspace ‘MyPubNubProject’
use_frameworks!
# replace next lines name in quote with your project name
target ‘application-target-name’ do
# Should only use this with projects
# that must have a minimum deployment
# target of iOS 8
platform :ios, ‘8.0’ # (or ‘9.0’ or ‘10.0’)
pod “PubNub”, “~> 4”
end

Run the command pod install in your terminal after. This should install the PubNub framework for you in your project. After it is installed, open up your project by double-clicking the .xcworkspace file instead of your normal project file.

Design a Chat Storyboard in Swift

Before we start putting in all the logic, let's design and build up the views of our app. Let’s start with our login view.

Rename ViewController.swift to ConnectVC.swift by highlighting the name in the class declaration and going up to Editor -> Refactor -> Rename.

When a user opens the app, we want them to have a field to enter a username and a channel they want to connect to, in addition to a connect button. Add those to your first view. Also, put in a cool title you want to call this app, I chose Topically!

I then made outlets for my username and channel TextFields by control-dragging from the item on my storyboard to my ConnectVC file. Do the same to your button, but instead of an outlet, create an action, of type UIButton, for it to run when pressed.

Next, let's create our channel chat view.

Create a new Cocoa Touch Class and name it ChannelVC. Create a new view controller in your storyboard and set the class to ChannelVC as well. While selecting that view, go to the top of your screen and click Editor -> Embed In -> Navigation Controller. Another view should now be in your storyboard. This is the navigation controller, it allows for more mobility for users when going in between views.

Add a UIBarButtonItem to the left spot on the navigation bar on your ChannelVC, this will be the leave button. Control-drag that to your ChannelVC.swift and create an action of type UIBarButtonItem named leaveChannel. Drag a UITableView into your ChannelVC view. Make it take up most of the screen leaving enough room for another TextField and a button with the text Send in it. Create those as well.

Make outlets for the table and for the TextField in your ChannelVC.swift, and make another action for the send button.

Our next step involves not our ChannelVC, but creating the custom cell inside of our table. Once we have the general layout of our ChannelVC setup, we have to customize the cells in our tableView. Create a new cocoa touch class named MessageCell, and drag a UITableViewCell into your table view. Set that cells class to your new class and change the identifier to MessageCell as well.

Drag whatever design you want, including whatever details you deem necessary for your use case. I put in the username and message labels into the cell, and once you're done, control-drag to create outlets to your MessageCell class. Make sure to set constraints so that the table doesn't squish your content.

For more information on making your app work on all screen sizes, reference Apple’s documentation on Auto Layout or the numerous guides available online.

Having all of these views is great, but not if they cannot move from one to another. Click on the bar above ConnectVC that has its name, and then click the yellow circle. Control-drag this to the navigation controller and select the show option. While the line to nav controller is selected click on the attributes tab on your right panel where it says “Storyboard Segue” at the top. Name the identifier “connectSegue”. This will allow you to perform this segue when you click the connect button on ConnectVC.

The next and final segue we need is one that brings us from ChannelVC to ConnectVC. Select ChannelVC the same way we did to ConnectVC and drag it to ConnectVC. This time select “Present Modally” and name it “leaveChannelSegue” in the attributes inspector.

Connecting a User to a Channel

Now that we've finished with the storyboard, let's start coding. We'll start with ConnectVC, which provides the username and channel to our ChannelVC where we'll utilize all of our PubNub knowledge. To start, perform a segue in our connect action.

@IBAction func connectToChannel(_ sender: UIButton) {
    self.performSegue(withIdentifier: "connectSegue", sender: self)
}

This utilizes our connectSegue we made in the previous section that brings us to the ChannelVC’s nav controller. The only other thing we need to do in this view controller is to prepare for the segue above. By overriding this function, we send information between the views.

NOTE: In this tutorial, if the user does not provide a username, I automatically assign the name “A Naughty Moose” to them. If they do not provide a channel, I send them to the channel “General.”

To access the view we are going to, we get an instance of our navigation controller, then get our ChannelVC view from there. We check if the text fields are empty, replace the values if we need to, and then set two variables in ChannelVC, which we have not created yet, with our username and channel values.

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {

    //Accessing Nav Controller and ChannelVC view
    if let navigationController = segue.destination as? UINavigationController,
        let channelVC = navigationController.viewControllers.first as? ChannelVC{
        var username = ""
        var channel = ""

        //Replacing empty values with default ones
        if(usernameTextField.text == "" ){
            username = "A Naughty Moose"
        }
        else{
            username = usernameTextField.text ?? "A Naughty Moose"
        }
        if(channelTextField.text == "" ){
            print("nothing in channel")
            channel = "General"
        }
        else{
            channel = channelTextField.text ?? "General"
        }

        //Setting values in ChannelVC
        channelVC.username = username
        channelVC.channelName = channel
    }
}

Creating a Chat View Controller with PubNub

In our ChannelVC, we should have two outlets, an action and our viewDidLoad function inside already. Above all of those, under the class definition, we will start defining some variables and resources that we need for the rest of the class.

First, let's make our class listen for PubNub events and make it work with our table. Import PubNub at the top of your file and after UIViewController in our class definition put in PNObjectEventListener, UITableViewDataSource, and UITableViewDelegate. Our class should now show an error, click on the error and add those stubs suggested, we'll fill those out in just a second.

Right under our class definition, let’s define a struct that makes working with our messages a little easier. My struct has three strings: a message, a username, and a UUID. Later when we are publishing messages, you can send different information and update the struct with those updates.
After that, create an array of Message and initialize it to be empty as all class variables need to have some sort of initial value.
Create a marker of the earliest message we have received, of type NSNumber and start the marker as -1.
Another variable to keep track of whether we already started loading more messages.
Now for the most important variable of this view controller, the one that publishes and subscribes, our PubNub object! This is the object we will be calling our PubNub functions on in this view controller.
We then have the username and the channel that the user entered in the last step, initialized with temporary values.
After that should be our message text field, our tableView, and our and our send action.

class ChannelVC: UIViewController,PNObjectEventListener, UITableViewDataSource, UITableViewDelegate {

    //Our Message struct, makes working with messages a little easier
    struct Message {
        var message: String
        var username: String
        var uuid: String
    }
    var messages: [Message] = []

    //Keep track of the earliest message we loaded
    var earliestMessageTime: NSNumber = -1

    //To keep track if we are already loading more messages
    var loadingMore = false

    //Our PubNub object that we will use to publish, subscribe, and get the history of our channel
    var client: PubNub!

    //Temporary values
    var channelName = "Channel Name"
    var username = "Username"

    //-- ALREADY SHOULD BE IN YOUR FILE
    //Where our messages come in
    @IBOutlet weak var messageTextField: UITextField!

    //We populated this with the information from our messages array
    @IBOutlet weak var tableView: UITableView!

    //...

}

Next, that we have established some global variables that we can use all throughout our code, let’s set up our viewDidLoad function. After calling the inherited viewDidLoad, change the title at the top of the navigation controller to the channel name and set your table view's delegate and data source to self.

self.navigationController?.navigationBar.topItem?.title = channelName

tableView.delegate = self
tableView.dataSource = self

Next, we configure and initialize our PubNub object. Here is where you insert your publish and subscribe keys found in your PubNub account. We set stripMobilePayload to false as it is deprecated and give this connection a unique UUID, which will make it easier to develop more features in the future. We initialize it, set ourselves as a listener, and subscribe to the channel the user picked. We then call the method loadLastMessages which we will create next.

//Setting up our PubNub object!
let configuration = PNConfiguration(publishKey: "INSERT PUBLISH KEY", subscribeKey: "INSERT SUBSCRIBE KEY")
//Gets rid of deprecated warning
configuration.stripMobilePayload = false
//Making each connection identifiable for future development
configuration.uuid = UUID().uuidString
client = PubNub.clientWithConfiguration(configuration)
client.addListener(self)
client.subscribeToChannels([channelName],withPresence: true)

//We load the last messages to populate the tableview
loadLastMessages()

There should be an error right now, saying that the function we are calling at the end of our viewDidLoad is undefined, so let's define it! This function is used to load the initial messages when we connect to a channel. It utilizes another function we will create named addHistory.

Let’s call this next function, using nil for the start and end, and then set a number of messages you would like to receive, to a max of 100. Our final act inside of this function is to bring our table views scroll down to the bottom of the table to the new messages.

//This function is called when this view initialy loads to populate the tableview
func loadLastMessages()
{
    addHistory(start: nil, end: nil, limit: 10)
    //Bring the tableview down to the bottom to the most recent messages
    if(!self.messages.isEmpty){
        let indexPath = IndexPath(row: self.messages.count-1, section: 0)
        self.tableView.scrollToRow(at: indexPath, at: .bottom, animated: true)
    }
}

Storage and Playback for Message History

Now for the function that allows us to look back into our history of the channel. Create it with a few key parameters, only of which the limit is needed, then call the essential function that allows us to view our channel’s history.

We use the function historyForChannel which has many overloaded versions. We could use the simpler one that returns the last 100 messages or one that takes in start and end times, both of these methods are handled by a PNHistoryResultBlock, which allows us to access the result of the query and the errors.

First, let's check if the result is not nil and if the status is and start accessing the messages! Once we know that our messages contain at least something, we can start accessing them. We need to update our earlistMessage start time with the earliest message we have received within our result. Next converting the object we get back to something that we can manage, an array of String keys and values.

From this new object, instead of working hard to access them every time we want to, let's create a Message object from our struct, add them to a temporary array, then insert that at the beginning of our global messages array. Make sure to reload the table then check for errors!

//Get and put the histroy of a channel into the messages array
func addHistory(start:NSNumber?,end:NSNumber?,limit:UInt){
    //The PubNub Function that returns an object of X messages, and when the first and last messages were sent.
    //The limit is how many messages are received with a maximum and default of 100.
    client.historyForChannel(channelName, start: start, end: end, limit:limit){ (result, status) in
        if(result != nil &amp;&amp; status == nil){

            //We save when the earliest message was sent in order to get ones previous to it when we want to load more.
            self.earliestMessageTime = result!.data.start

            //Convert the [Any] package we get into a dictionary of String and Any
            let messageDict = result!.data.messages as! [[String:String]]

            //Creating new messages from it and putting them at the end of messages array
            var newMessages :[Message] = []
            for m in messageDict{
                let message = Message(message: m["message"]! , username: m["username"]!, uuid: m["uuid"]! )
                newMessages.append(message)
            }
            self.messages.insert(contentsOf: newMessages, at: 0)
            //Reload the table with the new messages and bring the tableview down to the bottom to the most recent messages
            self.tableView.reloadData()

            //Making sure that we wont be able to try to reload more data until this is completed.
            self.loadingMore = false
        }
        else if(status !=  nil){
            print(status!.category)

        }
        else{
            print("everything is nil whaaat")
        }
    }
}

Next, let's fill in our tableView required functions. The first, numberOfRowsInSection is an easy one-liner, return the number of messages in your array. For the second, we first need to get an instance of your message cell and set the cell labels’ text to the message and username of the index of our message array. After that, just return the cell!

//Tableview functions required.
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    //change later
    return messages.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "MessageCell") as! MessageCell

    cell.messageLabel.text = messages[indexPath.row].message
    cell.usernameLabel.text = messages[indexPath.row].username


    return cell
}

One of the most import parts of using and debugging PubNub in Swift is creating listeners for events and messages. In this application, we use the function didRecieveMessage which allows us to access messages coming into our channel. The logic inside of this function will act as a smaller version of our loadLastMessages.

Check if the message that came in matches the channel that we are subscribed to in case we’re subscribed to anything else. Take the message we are given, and turn it into an array of String keys and values. Create a Message with that dictionary and append it to the end of your messages array.

Again, reload the data, and scroll down to the new message. This action can be changed based on your use case. I print the message in my console for debugging.

func client(_ client: PubNub, didReceiveMessage message: PNMessageResult) {
    //Whenever we receive a new message, we add it to the end of our messages array and
    //reload the table so that it shows at thebottom.

    if(channelName == message.data.channel)
    {
        let m = message.data.message as! [String:String]
        self.messages.append(Message(message: m["message"]!, username: m["username"]!, uuid: m["uuid"]!))
        tableView.reloadData()


        let indexPath = IndexPath(row: messages.count-1, section: 0)
        tableView.scrollToRow(at: indexPath, at: .bottom, animated: false)

    }

    print("Received message in Channel:",message.data.message!)
}

Now we can load some of the last messages when first opening the channel, and when new ones are sent they appear at the bottom.

What if there are more messages than what we initially load? In this new function, scrollViewDidScroll, we pull another amount of messages from historyForChannel when we pull down from the top. This can also be modified so that it will try to retrieve more when the user has not reached the top of the page for a more infinite scroll look.

We have a global variable called loadingMore that we check at the beginning to see if we are already loading more messages, and we then check if the user is scrolling past a certain threshold to start loading more. Thankfully using PubNub is ludicrously fast so it loads almost instantly. Once that is true, we set loadingMore to true and start to call our addHistory function, putting earliestMessageTime as the start, nil for the end, and the limit as however many you like, although the maximum that will be returned in 100.

//This method allows users to query for more messages by dragging down from the top.
func scrollViewDidScroll(_ scrollView: UIScrollView){
    //If we are not loading more messages already
    if(!loadingMore){

        //-40 is when you have dragged down from the top of all the messages
        if(scrollView.contentOffset.y < -40 ) {
            loadingMore = true
            addHistory(start: earliestMessageTime, end: nil, limit: 10)
        }
    }

}

We now need to publish messages when we click the send button. For that to happen let's create a function that sends the message that is in the messageTextField. Check if it is empty first, and handle if it is, then creates a dictionary with the message information you would like to send, and then use the simple publish function on your PubNub object.

This function takes in numerous types of variables and objects to send as the message and the channel name. You can also include a handler afterward to do something based on the status codes. After that, call the function that we just created in our sendMessage action.

func publishMessage() {
    if(messageTextField.text != "" || messageTextField.text != nil){
        let messageString: String = messageTextField.text!
        let messageObject : [String:Any] =
            [
                "message" : messageString,
                "username" : username,
                "uuid": client.uuid()
        ]

        client.publish(messageObject, toChannel: channelName) { (status) in
            print(status.data.information)
        }
        messageTextField.text = ""
    }

}

//When the send button is clicked, the message will send
@IBAction func sendMessage(_ sender: UIButton) {
    publishMessage()
}

In order to make our app fully work, we need to be able to leave the channel and go back to the ConnectVC. We already have a function for that, we just need to fill it in. Unsubscribe from all channels the client is subscribed to and then perform the “leaveChannelSegue” that we created originally.

client.unsubscribeFromAll()
self.performSegue(withIdentifier: "leaveChannelSegue", sender: self)

Finished Chat App in Swift

Let's run the app!

We've now got basic chat functionality. Users can send and receive messages in realtime, and messages are stored for a predefined amount of time.

The full GitHub repo for this project is available here.

Use PubNub for free up to 1 million messages per month. Check out the PubNub Swift SDK documentation, or any of the other 75+ PubNub client SDKs.

Create a Chat App in React

Samba Diallo — Wed, 29 May 2019 18:30:58 +0000

Chat is a key piece of most interactive applications. From 1:1 dating apps, group chats, to chatbots, realtime communication is an expectation of any multi-user app. Integrating this functionality is much more seamless if you choose the right framework and infrastructure from the get-go. In this tutorial, we'll show you how to do so - creating a chat window using React, Material-UI, and PubNub.

Our app will allow anyone to connect and chat in realtime on any channel they want. We will create this chat from scratch using the React framework and Material-UI components. The PubNub API is used to handle sending and receiving messages. These three pieces will help us create a modern and fast chat.

Also in this tutorial, we utilize Hooks, a new way of writing React components that reduce redundant code and organizes related pieces. I’ll explain more about why and how we use these new features later in the tutorial. After this tutorial, we will have a chat that allows anyone with a channel name to talk to one another. Channels are represented in the URL and on the page so sharing channels is easy!

Pub/Sub and Retrieving History

PubNub provides a simple and blazingly fast infrastructure for messages to be sent. PubNub is used to connect virtually unlimited amounts of people or systems, in under a quarter second or less, around the world. It has your use cases covered with its numerous SDK’s available, and even chat-focused resource center. In creating this app, we will use Publish/Subscribe for realtime messaging and Storage & Playback to retain messages.

Publishing provides us with a means of sending out messages to those who are listening on specific channels. Learn how to Publish in React.

Subscribing is the way we tell PubNub that we want to receive messages being sent to specific channels. Learn how to Subscribe in React.

Storage & Playback means that someone doesn’t have to be subscribed at the moment to receive messages on a channel. When a user connects we can retrieve the last messages for them to view! Learn how to Store & Playback messages in React.

Getting Started

In this chat example, we only need to utilize one API for all the chat capabilities. You'll need to create a PubNub account or login if you already have an account.

First, get your unique pub/sub keys in the Admin Dashboard, then enable Storage and Playback on the bottom left of your key options page. I set the retention time for my messages to one day, but go ahead and choose whatever time frame works best for you. Be sure to save your changes.

Now that that's set up, we can start setting up our React project.

How to Install React.js and PubNub

In order to install React.js and PubNub, we need to first make sure we have Node.js and npm. Install them at the official Node.js homepage. If you already have them installed, make sure your npm version is above 5.2 by entering npm -v into your terminal. Now we have our package managers to create our React app and install our PubNub SDK.

Once you install Node.js, run these commands to create your project and install our necessary modules. Wait as React is building you your website! Once that is done, the second line will install PubNub. The third will install our styling framework Material-UI.

npx create-react-app <your-app-name>
npm install --save pubnub
npm install @material-ui/core

We now have all that we need to start coding! If you enter npm start into your terminal and click on the link it provides once it’s done running, you should see an empty react page! Let’s get to coding!

Why use React Hooks?

Before October of 2018, you had to use class components to store local variables. Hooks brought us the ability to save state inside of functional components and Hooks removed much of the bloat that comes with classes.

Hooks make developing large scale applications easier, its functions help us group together similar code. We organize the logic in our components by what they are doing versus when they need to do it. We forgo the usual lifecycle functions like componentDidMount and componentDidUpdate and instead use useEffect.

useEffect is one of the two main hooks we use, the other being useState. useState is the new setState but works a bit different. The React Hooks documentation goes into detail on a few more, but another great part about Hooks is that we can create our own! This saves time and lines of code by utilizing what we have done already.

I'll show you how to create your own hook, utilize useEffect and useState in the following sections!

Create a Custom React Hook

Let’s start this off by creating our very own hook that simplifies some code for us in the future. Instead of creating onChange functions individually for each input, let’s bundle up what we can for each of them now, in one Hook!

If you look inside your project folder that we created, you can see that we have a few different folders. Navigate into the “src” folder and create a new file there called “useInput.js”. The rules of Hooks state that all hooks have to start with “use”. It also states that Hooks should only be used at the top level so we cannot use them in functions, conditions, or loops. We also cannot call them from regular JS functions, only React function components and custom Hooks! Now that we know the general rules behind them let's create one!

Through this hook, we will use the useState Hook. Import useState from react at the top of your file and after creating a function named, you guessed it, useInput.

import { useState } from 'react';
function useInput()
{
  //Define our Hook
}

This is where we can get a little funky with our syntax. We can use a destructuring assignment to receive the two objects that useState gives us, using only one line of code. But what is useState giving us? It’s basically returning a getter and setter, a variable that contains the value, and a function to set it! Instead of accessing our state by this.state.xxxxx, we are able to access it by the name alone.

let [value, setValue] = useState('');

Create a function expression assigned to a new variable we created named onChange. We pass “event” through the function and inside, we set our state value to the event’s target’s value. After let’s return these three variables/functions we’ve created: value, setValue, and onChange.

let onChange = function(event){
  setValue(event.target.value);
};
return {
  value,
  setValue,
  onChange
};

Finally export default useInput; at the end of our file to make it available for our main App to use!

Designing our React Components

Now that we have our Hook completed. Let’s set up our App.js file! We have a few key files to import at the top of our file: React and the two default Hooks we need, our useInput hook we just created, our App.css file, PubNub, and the Material-UI components.

Replace what is in your App.css with the following.

* {
  margin: 0;
  padding: 0;
}
body {
  width: 500px;
  margin: 30px auto;
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
.top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

Let’s make an outline of our chat using our functional component headers. This will help us figure what kind of design and flow we want for our chat. I chose three different components: App, Log, and Message.

App houses the Log, Inputs, and submit button. Log holds a list of Messages, and Message displays the message and who sent it. Make sure to import the required modules at the beginning of your file!

//These are the two hooks we use the most of through this Chat
import React, { useState, useEffect} from 'react';
//has a few css stylings that we need.
import './App.css';
//This is a hook we created to reduce some of the bloat we get with watching inputs for changes.
import useInput from './useInput.js';
//Lets us import PubNub for our chat infrastructure capabailites.
import PubNub from 'pubnub';
//Material UI Components
import {Card, CardActions, CardContent,List, ListItem,Button,Typography,Input} from '@material-ui/core';

// Our main Component, the parent to all the others, the one to rule them all.
function App(){
  //Bunch of functions!
  //return()
}

//Log functional component that contains the list of messages
function Log(props){
  //return()
}

//Our message functional component that formats each message.
function Message(props){
  //return()
}

Each of these components includes a return function that allows us to design what each one will look like. We get to say what information we pass down from our parents to our children. Via this design, we only pass information downwards, giving each component what it needs to function.

Setting up App Component: State with React Hooks

Our App is our main React chat component. For this component, there are a few things we need to set up, such as checking the URL for any changes to the channel, setting up our states, then we can make a few useEffect functions to sort what we want App to do, and when all of it happens.

The first action inside of our App is to create a default channel. “Global” is a good one. Then check the URL for a channel. If there isn’t one, then we can leave the default as is, but if there is one there, then we set the default channel to that.

let defaultChannel = "Global";
//Access the parameters provided in the URL
let query = window.location.search.substring(1);
let params = query.split("&");
for(let i = 0; i < params.length;i++){
  var pair = params[i].split("=");
  //If the user input a channel then the default channel is now set
  //If not, we still navigate to the default channel.
  if(pair[0] === "channel" && pair[1] !== ""){
    defaultChannel = pair[1];
  }
}

Let’s define our states with their initial values. Use useState to get getters and setters for our channel, making sure to put our default channel as its initial value. Do the same for our messages array, but initialize it to an empty array.

I also set a generic username for the user, based on the current time. Next set a temporary channel and message variable to the new hook we created. There we go, we have our states set up for our app.

const [channel,setChannel] = useState(defaultChannel);
const [messages,setMessages] = useState([]);
const [username,] = useState(['user', new Date().getTime()].join('-'));
const tempChannel = useInput();
const tempMessage = useInput();

useEffect in React

Next, we get to use the fancy new useEffect everyone’s been talking about. This basically replaces and reorganizes all the old lifecycle methods when we were not using hooks. Each function runs with each rerender unless we specify an array of variables as a second parameter for it to follow. Each time these variables change, the useEffect gets re-run.

REMEMBER: This is a SHALLOW equality check. Numbers and strings will count as different every time you set them as something else, but useEffect only looks at objects pointers, not their attributes.

We can have multiple of these functions, just each of their second parameters needs to be different. Essentially each useEffect is grouped by what it depends on to change, thus actions with similar dependencies run together.

useEffect(()=>{
  //Put code we want to run every time these next variables/states change
},[channel, username]);

Setting up PubNub in React

Now that we know how this new Hook works, the next step is to create a new PubNub object! Pull up PubNub to grab those publish and subscribe keys that we generated earlier, and place them in your new object. You can also set a UUID for this connection, whether that be an IP, a username, a generated UUID, or any unique identifier your use case defines. I set it as the username for simplicity’s sake.

const pubnub = new PubNub({
  publishKey: "<ENTER-PUB-KEY-HERE>",
  subscribeKey: "<ENTER-SUB-KEY-HERE>",
  uuid: username
});

After we have our object filled with our connection information, let’s include a Listener for PubNub events! This is useful for detecting new messages, new connections or statuses, and for handling presence events too. Our app doesn’t use presence nor does it require the use of creating a status listener as well, but I at least like to implement status and log some results. What we really need for our app is the ability to receive and handle messages coming in, so let’s define that!

Check if the message text is null or empty, and if it’s not, create a newMessage object. Set the messages array as its current state concatenated with the new message we receive. The arrow function makes sure that we are using the current state of messages and not the initial render’s state.

pubnub.addListener({
  status: function(statusEvent) {
    if (statusEvent.category === "PNConnectedCategory") {
      console.log("Connected to PubNub!")
    }
  },
  message: function(msg) {
    if(msg.message.text){
      let newMessages = [];
      newMessages.push({
        uuid:msg.message.uuid,
        text: msg.message.text
      });
      setMessages(messages=>messages.concat(newMessages))
    }
  }
});

Subscribing to the channel in our state will be our first connection to the PubNub server! If Presence is important to your use case, here is where you enable it. Find out who is in a channel with Presence on the PubNub React SDK.

pubnub.subscribe({
  channels: [channel]
});

Incorporating history is a key feature of any chat, so let’s pull a few messages to form a chat log. When we first connect to a channel, use the history function to retrieve the stored messages. Use the response to access the old messages and store them in a temporary array. Since our array should be empty, we can push those old messages into our states empty messages array.

pubnub.history({
      channel: channel,
      count: 10, // 100 is the default
      stringifiedTimeToken: true // false is the default
}, function (status, response){
  let newMessages = [];
  for (let i  = 0; i < response.messages.length;i++){
    newMessages.push({
      uuid:response.messages[i].entry.uuid ,
      text: response.messages[i].entry.text
    });
  }
  setMessages(messages=>messages.concat(newMessages))
});

Another awesome part of useEffect is that we can define behavior that shuts everything down before it runs again! Let’s return a function “cleanup“ and inside, unsubscribe from all channels, and set messages to another empty array.

return function cleanup(){
  pubnub.unsubscribeAll();
  setMessages([]);
}

Pub/Sub: Publishing

We’ve subscribed to a channel, but we still haven’t published yet. Unlike the PubNub features in the previous useEffect, we want to publish when the user sends a message. Let’s create a function named publishMessage that will publish messages to our channel.

Create the function and check if there is anything in our temporary message there. If there is, create your message object! I included both the message and the username so we know who sent it when we access the messages from any device. Start by creating another PubNub object, exactly the same as the last one. Call publish on it, including our new message and channel as an argument.

After we send the message, clear our temporary message state. This allows the user to send another if they want. Now we don’t have any code calling this function anywhere yet so it won’t fire, but the next function we define will!

function publishMessage(){
  if (tempMessage.value) {
    let messageObject = {
      text: tempMessage.value,
      uuid: username
    };

    const pubnub = new PubNub({
      publishKey: "<ENTER-PUB-KEY-HERE>",
      subscribeKey: "<ENTER-SUB-KEY-HERE>",
      uuid: username
    });
    pubnub.publish({
      message: messageObject,
      channel: channel
    });
    tempMessage.setValue('');
  }
}

Creating React Event Handlers

It’s important that we create fluid user interactions with our chat. Let’s create a handler for users to either submit a message or change channels via the ‘Enter’ key. We are going to create one function that I called handleKeyDown, which takes an event object.

function handleKeyDown(event){
  //Handling key down event
}

Once we’re inside of this function, our goal is to figure what is triggering this event. Later when we create the inputs we will set IDs for them. Start by checking the event’s target’s id. If it is “messageInput”, do another check if the key pressed was "Enter" or not. If it was, go ahead and call our function publishMessage.

if(event.target.id === "messageInput"){
  if (event.key === 'Enter') {
    publishMessage();
  }
}

Do the same checks to start off this else if statement as the previous, but this time using channelInput as the ID. Create a constant value that holds our temporary channel, but make sure to trim any leading or trailing whitespace. If we were only calling setChannel here, we wouldn’t need the check if the new and old channels are the same.

Since we also change the current URL to the one we created, we do need the check as there would unneeded duplications. Creating a new URL string that includes the new channel name also allows users to share page links easier. Finally set our temporary channel’s state to an empty string.

else if(event.target.id === "channelInput"){
  if (event.key === 'Enter') {
    //Navigates to new channels
    const newChannel = tempChannel.value.trim()
    if(newChannel){
      if(channel !== newChannel){
        //If the user isnt trying to navigate to the same channel theyre on
        setChannel(newChannel);
        let newURL = window.location.origin + "?channel=" + newChannel;
        window.history.pushState(null, '',newURL);
        tempChannel.setValue('');
      }
    }
  //What if there was nothing in newChannel?
}

This is great if the user enters a channel into our input, but what if they don’t? We can either alert them to their mistake, stay at the same channel, or take them to a default channel of our choice. I went with the last option, to take them to “Global”. Do the same check as before, but use "Global" this time and then set the channel as it.

We create a new URL and push it to our page history as before, but without any parameters. The code we included at the beginning of our App will recognize that and use the default channel. Again, set the temp channel to an empty string, making sure to put this code snippet before the last ones ending curly brace.

else{
  //If the user didnt put anything into the channel Input
  if(channel !== "Global"){
    //If the user isnt trying to navigate to the same channel theyre on
    setChannel("Global");
    let newURL = window.location.origin;
    window.history.pushState(null, '',newURL);
    tempChannel.setValue('');
  }
}

We add the current URL to our browsers back button history in order to give our users the option to navigate to previous channels through that. In order for our chat to actually navigate back and forth between previous channels using the back button, we need to do a few more things.

Navigating Between Previous Channels

Now that we set up all the features for our React chat room, let us add a feature to re-render our page. We will be changing our state, instead of reloading, when a user clicks back or forward between our pages.

Create a function named goBack that checks the URL for a channel and sets either “Global” or the channel found for our channel state. This function won’t run unless we add event listeners to our page!

function goBack() {
  //Access the parameters provided in the URL
  let query = window.location.search.substring(1);
  if(!query){
    setChannel("Global")
  }else{
    let params = query.split("&");
    for(let i = 0; i < params.length;i++){
      var pair = params[i].split("=");
      //If the user input a channel then the default channel is now set
      //If not, we still navigate to the default channel.
      if(pair[0] === "channel" && pair[1] !== ""){
          setChannel(pair[1])
      }
    }
  }
}

We only want to add the listener when the page loads, and to remove it when we leave. That sounds like another use for a useEffect hook! Create another, but pass in an empty array as the second argument. Now, this only runs once per the initial load of our chat. It will not run every rerender.

Create an event listener on our “window”, and return a cleanup function that removes that listener. The event listener will be waiting for “popstate”, which is when the user clicks the back/forward button in their browser. Put the last function we made, “goBack”, after the event name. Now our page won’t reload, it rerenders what it needs when it needs to!

useEffect(() => {
  window.addEventListener("popstate",goBack);

  return function cleanup(){
    window.removeEventListener("popstate",goBack);
  }
},[]);

Using JSX to Create a React UI

Now that we have completed all the logic we need in our backend, let us build a simple yet modern front-end! To do this, we return JSX, a JavaScript UI description language. It allows us to use our own variables and objects inside groups called components. The syntax looks something similar to HTML with a templating engine, but it is JSX!

When a variable/state changes, any component that uses it will re-render with the new value. That’s what makes our app feel more responsive, as soon as there is a change it updates. Because of this, using PubNub and React together is a great idea. PubNub is able to deliver messages fast and React keeps up by updating its components!

App Design

Let’s make our design for our App component now. Material-UI provides us with beautiful components that we can use and fill with our own information. Use the following design and we’ll go over what functions are being called in certain areas.

return(
  <Card >
    <CardContent>
      <div className="top">
        <Typography variant="h4" inline >
          PubNub React Chat
          </Typography>
        <Input
          style={{width:'100px'}}
          className="channel"
          id="channelInput"
          onKeyDown={handleKeyDown}
          placeholder ={channel}
          onChange = {tempChannel.onChange}
          value={tempChannel.value}
        />
      </div>
      <div >
        <Log messages={messages}/>
      </div>
    </CardContent>
    <CardActions>
      <Input
        placeholder="Enter a message"
        fullWidth={true}
        id="messageInput"
        value={tempMessage.value}
        onChange={tempMessage.onChange}
        onKeyDown={handleKeyDown}
        inputProps={{'aria-label': 'Message Field',}}
        autoFocus={true}
      />
      <Button
        size="small"
        color="primary"
        onClick={publishMessage}
        >
        Submit
      </Button>
    </CardActions>
  </Card>
);

It may look like a lot of design here, but it is organizing a few distinct elements.

We first have our title inside of a Typography component. After that in the same div is our channel Input. Inputs include many properties that define the actions it can take. Those include its ID, the function that handles onKeyDown, its placeholder, the onChange function, and its value.

It also has areas to reference its styles as well. After that div, we have our Log, another functional component we have not created yet. That log takes our messages array and will re-render every time that array changes. After our Log, we are able to have another Input and Button. The Input is where the user creates a message. We fill its properties with the respective states and variables that it concerns.

We also set it to auto-focus as well. Set the Button’s onClick to our publish message function to allow the users another way to send their messages. This is the end of our App component and the back-end is completed. Next, we need to create two more small components to display our messages.

Log and Message Design

Our app defines much of how our chat works, but we need two more components to complete it. Both return JSX and organize how our messages are displayed. The first, Log, displays a List of Typography filled ListItems. These ListItems iterate through a map of our messages and output a Message. We create Message with the key of the index in the array, the uuid of the message, and the text of the message as well.

function Log(props) {
  return(
    <List component="nav">
      <ListItem>
      <Typography component="div">
        { props.messages.map((item, index)=>(
          <Message key={index} uuid={item.uuid} text={item.text}/>
        )) }
      </Typography>
      </ListItem>
    </List>
  )
};

The Message component represents one single message, a div element, filled with the uuid and the text, separated by a colon. Our App component’s children access the messages by props. They do not get to edit or change, only read and display, what is passed to them.

Now that we have completed defining our components, we finish our app by exporting it at the bottom of our file. The code in index.js will render our App to the webpage! Run npm start in our project folder and navigate to localhost:3000 in our browser we can see our app up and running!

function Message(props){
  return (
    <div >
      { props.uuid }: { props.text }
    </div>
  );
}

export default App;

We have successfully created an app that allows users to chat in channels of their choosing. Check out a live version! The full code repository here as well.

What's Next?

Now that you've got your basic messaging functionality implemented, it's time to add more features! Head over to our Chat Resource Center to explore new tutorials, best practices, and design patterns for taking your chat app to the next level.

DEV Community: Samba Diallo

Serverless Slack Apps and Slash Commands

Table Of Contents

Falling in love with serverless

Serverless development for Slack-ers

Traditional Slack Apps

Boneless Slack Apps

Search Google Images in Slack

Create a Custom Search Engine

Get a Google JSON API key

Setup your serverless environment

Google API Call

Formatting!

How does it look?

Rustifying Chat: Create a Terminal UI Chat App in Rust

What is Publish-Subscribe?

Setting Up a Rust Environment

Create a Custom Error

Define Structs for Rust JSON Response

Asynchronous Rust: How to Multithread

PubNub REST API

Subscribing to a Channel in Rust with a REST API

Function Definition

Create the URL String

Call the reqwest::get function

Successful Response – JSON to Object

Errors

Publishing Messages in Rust

Function Definition

Object to JSON

Create URL String

Create GET Request

Create a Terminal UI using Cursive

What is a TUI?

Channel and Username Input

Connect to a Channel

Create the Chat Layer

Publishing a Message

Inserting New Messages Into UI

Next Steps

Build a Swift Chat App

Creating a App with PubNub in Xcode

PubNub

Xcode App Setup

Design a Chat Storyboard in Swift

Connecting a User to a Channel

Creating a Chat View Controller with PubNub

Storage and Playback for Message History

Finished Chat App in Swift

Create a Chat App in React

Pub/Sub and Retrieving History

Getting Started

How to Install React.js and PubNub

Why use React Hooks?

Create a Custom React Hook

Designing our React Components

Setting up App Component: State with React Hooks

useEffect in React

Setting up PubNub in React

Pub/Sub: Publishing

Creating React Event Handlers

Navigating Between Previous Channels

Using JSX to Create a React UI

App Design

Log and Message Design

What's Next?