WebSocket Close Codes Explained: A guide to Connection Status Codes

Saransh Barua — Thu, 03 Apr 2025 06:55:37 +0000

WebSocket connections, unlike traditional HTTP requests, maintain a persistent connection between client and server. When these connections end, they do so with specific close codes that provide valuable information about why the connection was terminated. Let's dive into these codes and understand their significance.

Normal Closure Scenarios (1000-1001)

1000 - Normal Closure

This is the "happy path" of WebSocket closures. When you see this code, it means the connection completed its purpose and was closed gracefully. Think of it like hanging up a phone call after saying goodbye.

1001 - Going Away

The server or client is going down for maintenance or a browser tab is closing. It's like telling your friend "I need to go now" before ending a conversation. This gives the other party a chance to prepare for disconnection.

Protocol and Data Issues (1002-1003)

1002 - Protocol Error

Something went wrong with the WebSocket protocol itself. It's similar to two people speaking different languages - communication becomes impossible.

1003 - Unsupported Data

The endpoint received data it couldn't handle. Imagine sending an image file when the receiver only expects text messages.

Connection Abnormalities (1005-1006)

1005 - No Status Received

A connection closed without explicitly stating why. This is like someone hanging up the phone without saying anything.

1006 - Abnormal Closure

The connection was terminated unexpectedly. Think of it as your phone call dropping due to poor signal.

Data and Policy Issues (1007-1009)

1007 - Invalid Frame Payload

The message contained invalid data. It's like receiving a corrupted file.

1008 - Policy Violation

The endpoint is terminating the connection due to a policy breach. Similar to being removed from a chat room for violating rules.

1009 - Message Too Big

The message exceeded size limits. Like trying to send a file that's too large via email.

Technical Issues (1010-1015)

1010 - Mandatory Extension

The client wanted an extension the server couldn't provide. Think of it as needing a specific app feature that isn't available.

1011 - Internal Server Error

Something went wrong on the server side. Similar to a restaurant kitchen having problems preparing your order.

1012 - Service Restart

The service is restarting. Like a "be right back" sign in a shop window.

1013 - Try Again Later

The server is temporarily unable to handle the request. Think of it as a "busy signal" on a phone line.

1015 - TLS Handshake Failure

There was a problem with the security handshake. Similar to failing to verify someone's identity before a secure conversation.

Best Practices for Handling Close Codes

Always implement handlers for at least codes 1000, 1001, and 1006
Log abnormal closures (especially 1006 and 1011)
Provide reconnection logic for temporary issues (1012, 1013)
Give user feedback for policy violations (1008)

Creating a smooth landing page reveal animation with CSS animations and vanilla JS

Saransh Barua — Mon, 06 Jul 2020 18:46:32 +0000

This is my first post on Dev, so I will keep it simple and short. Recently I came back to Codepen after years to do what I love the most - create awesome stuff(at least I try to).
And this time I decided to put the big guns (react, vue, webgl, etc) aside and use the ultimate old school swiss knife (html, CSS, JavaScript) to create something.
Animations and interactions attract me the most when I visit a website or a product. Hence I tried to create a small animation and I had two things in mind:
• Can I create something which does not require a lot of complex code or use of a library?
• Despite being simple it should offer delightful user experience and should be smooth!

I came up with this:

The idea

The concept behind the text reveal animation is dead simple.

Make a <div>.
Put some text in it.
Apply overflow: hidden on the div so that anything outside the box is not visible.
Move the text downwards and rotate it a by a few degrees using transform: translateY(200px) rotate(15deg).
Now the text is hidden because it is outside the box and tilted a little bit.
Create a CSS animation using @keyframes - Move the text upwards by 200px and rotate it to 0 deg by the end of the animation.

@keyframes slideup {
  0% {
    transform: translateY(200px) rotate(20deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

7.Now comes the fun part where you need to set the animation duration and other attributes as well as bezier curve for the animation. These attributes combined are the key to make a good animation.
I choose easeInOutCubic(0.65, 0, 0.35, 1) because it resembles the flow that I wanted in my animation. You can choose some other values depending on what you like and how you want your animation to look and feel like. Here's the class that enables the animation:

.animate-slideup {
  transform: translateY(200px) rotate(15deg);
  animation: slideup 1000ms cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
  transform-origin: top center;
}

Notice how initially the text is shifted 200px downwards in Y direction.

This is it. This is the css used to create that effect where the text slides up with a slight rotation. But it still does not feel good. Why?

It's because right now, we are animating the whole text at once. What we want is that the words flow up slowly and individually so that the animation seemsa bit more interesting.
To achieve that, we use some javascript magic ;)

We create a quote string.
Traverse that string and on each word, create a span using document.createElement("span"). Attach the class animate-slideup to that span and append this child to the parent . Also, we need to add an animation-delay on every traversal with the delay increasing at a constant rate on every iteration. Something like delay(in ms) = delay(in ms) + x(const).
Congratulations!! This is it. This gives you the animation that you've been craving for. The flow that you couldn't get out of your head while you were trying to sleep. And god, you feel so great now!

Extra efforts

I added some extra animations(CSS only) which will reveal our hero text and our main animations. The code for that is simple too. Grow the width of a div till 50% of the time and then height from 2px to 100vh till 100% of the time. (in this case the light green background), render the main animation and at last a sweet rotating effect for the full stop to give a solid ending to our smooth animation.

Parting words

I failed at keeping this post short but I hope I made it simple. This is my first blog/post on any platform that I've written. I hope you enjoyed it! Let me know in the comments.

You can follow me and get in touch with me on various social media accounts. I would love to talk to you, listen to your stories and experiences and help you out in any way possible!
• Twitter
• Codepen
• Github
• LinkedIn

And lastly, remember, try to keep it simple because Simple is the new sexy!

DEV Community: Saransh Barua