Giter VIP home page Giter VIP logo

express-socket-io's Introduction

Example Express.js Socket.oi

In this example, I will use Express.js to create a simple RESTful API. The API should be able to receive and send JSON data to the client. I will use the browser console to accomplish this.

Normally, to create a server using Express.js, we would use require('http') from the Node modules. When we call app.listen(), an HTTP server is attached to our Express app, and this is usually the main approach. However, if we want to use something like WebSocket or TCP connections, creating an HTTP server would give us more flexibility.

express.static("public") Express should be to able to serve static content inside the public folder. So, we can get an image for example: http://localhost:300/image.jpg

Once we have created an HTTP server and added our app to it, we can run our application this way: server.listen(3000,()=>{}).

Here are the middlewares that will be used:

  • app.use(bodyParser.json())
  • app.use(morgan("dev"))
  • app.use(express.static("public"))
  • app.use(cors())

Get data directly from the browser console. Google Chrome is recommended.

Open a new tab and type this: about:blank and press F12 to open the console.

To send data to the server and receive a response, we can use the following fetch method:

fetch("http://localhost:3000/customer", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Luna" }),
})
  .then((res) => res.json())
  .then((data) => console.log(data));

To get data from the Node/Express, we can use the following method:

fetch("http://localhost:3000/", {
  method: "GET",
  headers: { "Content-Type": "application/json" },
})
  .then((res) => res.json())
  .then((data) => console.log(data));

About Socket.oi

When building real-time web applications, we often need to use WebSockets to establish a two-way communication channel between the server and the client. Socket.IO is a popular library for enabling real-time, bidirectional, event-based communication between the client and the server.

Express is a popular web application framework that makes building RESTful APIs and web applications a lot easier. Express also provides an easy way to create an HTTP server.

To use Socket.IO with Express, we can simply create a Socket.IO server and attach it to our Express HTTP server. This allows us to serve HTTP requests and WebSocket requests from the same server.

When a client connects to the server using Socket.IO, the client sends an initial HTTP request to establish the WebSocket connection. The server checks the request and decides whether it is an HTTP request or a WebSocket request. If it is an HTTP request, the server responds with an HTTP response. If it is a WebSocket request, the server upgrades the connection to a WebSocket connection and establishes a two-way communication channel with the client.

Once the WebSocket connection is established, the client and server can send data to each other in real-time without the need for constant HTTP requests. This makes it possible to build real-time web applications that respond instantly to user actions.

Overall, using Express with Socket.IO provides a powerful combination for building real-time web applications with ease.

Testing our Socket.oi server

Use can code a client of course, but in this case I just want to do a simple test. For that we can use teh socketio-tester

socketio

express-socket-io's People

Contributors

llllollooll avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.