How can Socket.io be utilized in conjunction with Next.js, Express, and TypeScript using ES6 import statements instead of requiring statements?

I am engaged in a TypeScript undertaking that employs Socket.io for communication between a frontend created with Next.js and a custom Express server backend. I encountered difficulty while configuring Socket.io as I could not find any documentation that showed how to set it up in a TypeScript project using the ES6 import syntax instead of requiring. Furthermore, it was challenging to find information on how it all integrates with Next.js.

I had difficulty finding resources that explained how to incorporate Socket.io into a TypeScript project using the ES6 import method. This made the process of setting up Socket.io a bit challenging for me. To make matters worse, I found it even harder to find information on how Socket.io should be integrated with Next.js. This lack of clear and comprehensive documentation made it difficult for me to understand how everything should fit together. Despite the challenges I faced, I was ultimately able to set up Socket.io and integrate it with Next.js, but it would have been much easier if there had been more detailed documentation available.

If you have no prior knowledge or experience…

In order to set up my project, I began by using the command,

 npx create-next-app — example custom-server-typescript

to create a custom TypeScript server. I then retrofitted Express into it by referencing the custom Express server example. The final version of my server.ts file can be found at the bottom of this post.

What was the reason for not following another example?

Most of the examples I saw online want you to do something like the following: In order to set up Socket.io in a TypeScript project using the ES6 import syntax, there were a few steps that needed to be taken. The first step was to import the Socket.io library and initialize it in the project. Next, it was necessary to configure the Socket.io server and establish the connection between the client and the server. It was also important to define the event handlers for the various actions that needed to be performed, such as sending and receiving data. Despite the clear instructions provided in these examples, I found it challenging to understand how all of these steps fit together and how to implement them in my own project.

But I didn’t want to have two or any random require statements in my TypeScript code if it could be avoided. I believed that by avoiding them, my code would be more organized and easy to understand. It would also make it easier for other developers to understand and maintain the codebase in the future. Additionally, it would improve the performance and scalability of the application. Overall, I thought it was important to find a way to use the ES6 import syntax instead of the require statements.

The server.ts file only contains ES6 imports….

The dependencies you need (In addition to Next.js/React/TypeScript):

npm install -s express @types/express socket-io

The code that you have been eagerly anticipating:

server.ts explanation

The primary distinction between my server.ts file and those generated by the Next.js examples is the use of the http module to run the server, as opposed to Express. This is a necessary step in order to ensure that Socket.io can be properly attached to the server once it is set up. This change allows for a more seamless integration of Socket.io within the Next.js framework and provides a more efficient method of communicating between the client and server.

Further modifications:

• I made the change to name the variable nextApp instead of just app to make it more obvious that it was a Next.js app. Similarly, I changed the handler variable to nextHandler for the same reason. Furthermore, it is a common practice to use the variable app when working with Express. This way, it’s clearer and more consistent with the conventions in the codebase.
• When creating the HTTP server, I chose to use the http.CreateServer() method instead of the traditional approach of using const server = require("http").Server(app);. This decision was made to ensure that the code adhered to the latest best practices and to make it more efficient. The http.CreateServer() method provides a more streamlined way to create the server, and it also allows for greater flexibility when it comes to customizing the server. Additionally, it eliminates the need for unnecessary lines of code and keeps the overall structure of the project neat and clean.
• Instead of using the common method of requiring the socket.io library and passing in the HTTP server as a parameter, such as “const io = require("socket.io")(server);”, I utilized the io.attach() method to attach the socket.io library to the HTTP server. This approach can be useful for certain use cases and can provide more flexibility when working with the socket.io library in a project. It is important to keep in mind that the method of attaching socket.io to the server may vary depending on the specific requirements and implementation of the project.

Summary

This post is designed to show you how to use Socket.io in a Next.js custom server using the ES6 import method instead of require

I hope that this demonstration helps you in your own projects. If it did, please let me know by dropping a reaction. On the other hand, if you think that there is something that I could improve, please let me know in the comments section. I am always looking for ways to make my content more helpful for my readers.