Unable to connect to the Subscription server even after using graphql-ws

const {ApolloServer, gql} = require('apollo-server');
const { sequelize } = require('./models/index')
const contextMid = require('./util/contextMid')


// The GraphQL schema
const typeDefs = require('./graphql/typeDefs')

// A map of functions which return data for the schema.
const resolvers = require('./graphql/resolvers')

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: contextMid
});

server.listen().then(({url})=>{
  console.log(`🚀 Server ready at ${url}`)
  sequelize
    .authenticate()
    .then(()=>console.log('Database connected'))
    .catch((err)=>console.log(err))
})

This is my server.js

const {gql} = require('apollo-server')
module.exports= gql`
  type User {
    username: String!
    email: String!
    createdAt:String!
    token:String
    latestMessage:Message
  }

  type Message {
    uuid:String!
    content:String!
    to:String!
    from:String!
    createdAt:String!
  }

  type Query {
    getUsers: [User]!
    login(username:String!, password:String!):User!
    getMessages(from:String!):[Message]!
  }

  

  type Mutation{
    register(
      username:String! 
      email:String! 
      password:String! 
      confirmPassword: String!
    ): User!

    sendMessage(
      to:String!
      content:String!
    ):Message!
  }

  type Subscription{
    newMessage:Message!
  }
`;

this is the typeDefs.js

const { User , Message } = require('../models')
const bcrypt = require('bcryptjs')
const jwt = require('jsonwebtoken')
const { UserInputError, AuthenticationError } = require('apollo-server');
const { JWT_SECRET } = require('../config/env.json')
const { Op }=require('sequelize')
const { PubSub } = require('graphql-subscriptions');


Subscription: {
    newMessage: { 
      subscribe: () => pubsub.asyncIterator('NEW_MESSAGE')
    }
  }

And this is the subscriptions part of the resolvers.js

When i opened the apollo server and ran the newMessage subscription status turned to red and it said unable to connect to wss:localhost:4000/subs
and in the message it said:

{
"message": "Your subscription url is a websocket url, so your server must support graphql-ws or subscriptions-transport-ws protocol. If your server supports HTTP multipart subscriptions, change your subscription url to HTTP."
}

I am new to this please help

I researched and have tried the following changes but nothing worked

I have tried making the endpoint to https://localhost:4000/graphql
I have tried making the subscriptions to wss://localhost:4000/
I have made the implementations in the Apollo server to graphql-ws

I once set the implementations to http multipart and it didnt display the message but the status still showed the same