Systems | Development | Analytics | API | Testing

November 2023

Essential guide to WebSocket authentication

Authenticating WebSocket connections from the browser is a lot trickier than it should be. Cookie authentication isn’t suitable for every app, and the WebSocket browser API makes it impossible to set an Authorization header with a token. It’s actually all a bit of a mess! That is the last thing you want to hear when it comes to security, so I’ve done the research to present this tidy list of methods to send credentials from the browser.

How to add realtime updates to your React application

Imagine having to restart WhatsApp whenever you anticipate a new message, or needing to reload the page every time you expect an update on the big game. That would be a terrible user experience! Today, users expect the UI to automatically update the moment information becomes available from the backend, so, of course, we must enable them in our applications. There are a handful of technologies, techniques, and services you can use to implement live updates in React.

Ultimate guide: Best databases for NodeJS apps

NodeJS is a JavaScript-based backend framework for web applications. It enables fast, scalable, and efficient development with high concurrency and data streams. Choosing the right database for NodeJS applications is a challenge for developers. A database should store and manage the data, handle the volume and velocity of data, provide the features and functionality you need, and be compatible, easy, secure, and reliable with NodeJS.

How InvitePeople events platform uses Ably - Interview with CTO Erik Gullestad

Their platform is used by companies like Deutsche Bahn to host virtual and hybrid events, from webinars to conferences with tens of thousands of online concurrent participants.. In this interview, Erik Gullestad, co-founder and CTO of InvitePeople talks about his experience building an event management platform and about InvitePeople’s success with Ably.

How to build an avatar stack with Ably Spaces

Tom Camp, DevRel Engineer at Ably takes you through a tutorial of adding an avatar stack to your application using Ably's latest product, Spaces. An avatar stack is a visual representation of a user’s presence - showing them as online and connected. They are the most common way of showing the online status of members in an application by displaying an avatar for each member. Events are emitted whenever a member enters or leaves a space, or updates their profile data.

How to authenticate a Next.js Route Handler using Clerk

When building web applications you’ll often be using services on the client that require authentication. A common way client-side SDKs like Ably authenticate themselves is by using server-side API endpoints that generate and return access tokens. Using access tokens allows you to keep your service’s secrets on the server and instead issue time-limited and scope-limited tokens to a client. Some services even let you create revocable tokens for added security.

No more refreshing: Achieving low latency data with Ably and Confluent Cloud

Realtime data is rapidly becoming a standard in many consumer applications. From responsive chat applications to low latency financial applications, nobody wants to refresh their browser for new data. With lots of data bouncing around Kafka behind a firewall, it begs the question of how you can serve this information to your users without sacrificing on latency. Ably provides a seamless way to serve this data to your end users devices, globally, through a direct integration with Confluent Cloud.

How to use WebSockets with React and Node

In this WebSocket tutorial, Alex Booker from Ably (@CodeCast) teaches you how to implement realtime updates in your React applications. Here, we use React on the frontend and Node on the back to build a live cursors feature from scratch, but the fundamental WebSocket lessons can be applied to any manner of realtime application. WebSockets are a bidirectional full-duplex communication protocol used to enable realtime updates such as chat, multiplayer collaboration, notifications, and other live updates in your React applications.

How to create an Avatar Stack using Ably and Flowbite React

Websites and apps are slowly starting to integrate more collaborative features as a means of increasing interactivity and the functionality of various use-cases. Be it a collaborative document or a chat room, one common feature is to show who else is in the space with you. Typically this’ll be done with an Avatar Stack, a collection of icons, each representing a client connected to the space.

Best NodeJS frameworks for seamless backend development

NodeJS is a JavaScript runtime environment for running JavaScript applications outside the browser environment. It’s asynchronous and event-driven, meaning it doesn't block the event loop - making NodeJS highly suitable for the development of server-side web applications. With around 50,000 open source packages available through npm (Node Package Manager), NodeJS facilitates the seamless backend extension. The GitHub repository has 99k stars and 27.5k forks demonstrating an active community.

Make your React-based applications collaborative using our new Spaces Hooks and starter kits

We are excited to announce that the Ably Spaces SDK now includes support for React Hooks. This means that developers can integrate collaborative features into their React-based applications in an efficient and idiomatic way. To help you quickly get started we have created a set of React-based starter kits for the four key collaborative features supported within the Spaces SDK - jump to these now!

9 React component libraries for efficient development in 2023

Component libraries are essential tools for efficient React development. They provide a collection of pre-built UI components that can be reused across projects, saving developers time and effort. In this article, we'll explore some of the best React component libraries that can boost your productivity and enhance your user interface. Whether you need a simple button, a complex dashboard, or anything in between, you will find a suitable component library for your React project.

Get started with security: Vite, React, and Ably Token Requests for API access

SaaS APIs typically require some kind of authentication to allow access. While there are many ways that APIs can implement authentication, one popular choice is using secret keys as the scheme. Exposing secret keys directly to a client application however can create security risks, so how can client applications based on libraries like React securely access SaaS services? Many APIs, including Ably, offer an additional client-oriented token authentication system.