why does webpack keep disconnecting and trying to reconnect?

enter image description hereMy webpack-dev-server keeping disconnecting and trying to reconnect, without actually connecting. Attached herein is a picture of my console in chrome

This is my webpack config.js[enter image description here][2]

````
const path = require("path");
const fs = require("fs");
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin");
const appDirectory = fs.realpathSync(process.cwd());

module.exports = { 
entry:[
    "webpack-dev-server/client?http://192.0.0.0:8080",
    "webpack/hot/only-dev-server",
    path.resolve(appDirectory, "src/app.ts"), // path to the main .ts file
],
output: {
    path: path.join(__dirname, 'dist'),
    filename: "[name].js", //Name for the javascript file that is created/compiled in memory
    clean: true,
    sourceMapFilename: "[name].js.map"
},
devtool: "eval-cheap-source-map",
resolve: {
    extensions: [".tsx", ".ts", ".js"],
},
devServer: {
    client: {
        webSocketTransport: 'ws',
        reconnect: true,
        overlay: true,
        progress: true,
    },
    allowedHosts: 'all',
    // host: "0.0.0.0",
    port: 8080, //port that we're using for local host (localhost: 8080)
    static: path.resolve(appDirectory, "public"), //tells webpack to serve from the public folder
    hot: true,
    liveReload: true,
    devMiddleware: {
        publicPath: "/",
    }
},
module: {
rules: [
    {
        test: /.tsx?$/,
        enforce: "pre",
        use: "ts-loader",
        exclude: /node_modules/,
    },
],
},
plugins: [
    // new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
        inject: true,
        template: path.resolve(appDirectory, "public/index.html"),
    })
],
mode: "development"
}; ````

I am have try changing the entry point, host and deServer
Still the webpack-dev-server is not connecting, please what else can i do?