docs: improve webSocketServer example (#3886)

Author: snitin315

examples/web-socket-server/README.md renamed to examples/web-socket-server/sockjs/README.md

@@ -1,4 +1,4 @@
-# web-socket-server
+# web-socket-server (sockjs)
 
 To create a custom server implementation.
 
@@ -23,27 +23,6 @@ Usage via CLI:
 npx webpack serve --web-socket-server sockjs --open
 ```
 
-## ws
-
-This mode uses [ws](https://github.com/websockets/ws) as a server.
-
-**webpack.config.js**
-
-```js
-module.exports = {
-  // ...
-  devServer: {
-    webSocketServer: "ws",
-  },
-};
-```
-
-Usage via CLI:
-
-```console
-npx webpack serve --web-socket-server ws --open
-```
-
 ### What Should Happen
 
 1. The script should open `http://localhost:8080/` in your default browser.

examples/web-socket-server/app.js renamed to examples/web-socket-server/sockjs/app.js

@@ -0,0 +1,13 @@
+"use strict";
+
+// our setup function adds behind-the-scenes bits to the config that all of our
+// examples need
+const { setup } = require("../../util");
+
+module.exports = setup({
+  context: __dirname,
+  entry: "./app.js",
+  devServer: {
+    webSocketServer: "sockjs",
+  },
+});

examples/web-socket-server/sockjs/webpack.config.js

@@ -0,0 +1,29 @@
+# web-socket-server (ws)
+
+To create a custom server implementation.
+
+## ws
+
+This mode uses [ws](https://github.com/websockets/ws) as a server.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    webSocketServer: "ws",
+  },
+};
+```
+
+Usage via CLI:
+
+```console
+npx webpack serve --web-socket-server ws --open
+```
+
+### What Should Happen
+
+1. The script should open `http://localhost:8080/` in your default browser.
+2. You should see the text on the page itself change to read `Success!`.

examples/web-socket-server/ws/README.md

@@ -0,0 +1,6 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+target.classList.add("pass");
+target.innerHTML = "Success!";

examples/web-socket-server/ws/app.js

@@ -2,9 +2,12 @@
 
 // our setup function adds behind-the-scenes bits to the config that all of our
 // examples need
-const { setup } = require("../util");
+const { setup } = require("../../util");
 
 module.exports = setup({
   context: __dirname,
   entry: "./app.js",
+  devServer: {
+    webSocketServer: "ws",
+  },
 });