How to Build a Real-Time Chat Application with Socket.io and Next.js

Introduction

Real-time chat applications are an integral part of modern web development, providing instant communication capabilities to users. In this post, we'll explore how to build a real-time chat application using Socket.io and Next.js. We'll cover setting up the project, implementing the chat functionality, and deploying the application.

Setting Up the Project

Create a Next.js App:

Start by creating a new Next.js application:
```
npx create-next-app real-time-chat
cd real-time-chat
```
Install Dependencies:

Install the necessary dependencies, including Socket.io:
```
npm install socket.io socket.io-client
```

Setting Up the Server

We'll set up a simple server using Socket.io to handle real-time communication.

Create `server.js`

const express = require('express')
const http = require('http')
const socketIo = require('socket.io')
 
const port = process.env.PORT || 4001
const app = express()
 
const server = http.createServer(app)
const io = socketIo(server)
 
io.on('connection', (socket) => {
  console.log('New client connected')
 
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg)
  })
 
  socket.on('disconnect', () => {
    console.log('Client disconnected')
  })
})
 
server.listen(port, () => console.log(`Listening on port ${port}`))

Integrating Socket.io with Next.js

Next, we'll integrate Socket.io with our Next.js application to enable real-time communication.

Create `utils/socket.js`

import { io } from 'socket.io-client'
 
const socket = io('http://localhost:4001')
 
export default socket

Building the Chat Interface

Now, let's create a simple chat interface in our Next.js application.

Update `pages/index.js`

import { useState, useEffect } from 'react'
import socket from '../utils/socket'
 
const HomePage = () => {
  const [message, setMessage] = useState('')
  const [chat, setChat] = useState([])
 
  useEffect(() => {
    socket.on('chat message', (msg) => {
      setChat((prevChat) => [...prevChat, msg])
    })
 
    return () => socket.off('chat message')
  }, [])
 
  const handleSubmit = (e) => {
    e.preventDefault()
    socket.emit('chat message', message)
    setMessage('')
  }
 
  return (
    <div>
      <h1>Real-Time Chat</h1>
      <div>
        {chat.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
        <button type="submit">Send</button>
      </form>
    </div>
  )
}
 
export default HomePage

Styling the Chat Application

For better user experience, let's add some basic styling.

Update `styles/globals.css`

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 20px;
}
 
div {
  background-color: white;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
 
input {
  width: calc(100% - 60px);
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
 
button {
  padding: 10px;
  background-color: #0070f3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
 
button:hover {
  background-color: #005bb5;
}

Deploying the Application

Deploying your application can be done easily using Vercel, which provides a seamless deployment experience for Next.js applications.

Deploy with Vercel:
```
npm install -g vercel
vercel
```
Follow the prompts to deploy your application.

Conclusion

Building a real-time chat application with Socket.io and Next.js is straightforward and efficient. By leveraging these powerful tools, you can create interactive and engaging applications that provide instant communication capabilities. Start experimenting with real-time features in your Next.js projects to enhance user experience.

For more detailed guidance, visit the Socket.io documentation and the Next.js documentation.

Go back Home.