如何在同一台服务器上同时发出 HTTP 和 Websocket 请求？

Question

I am trying to run a server doing HTTP and Websocket requests. The HTTP requests will be used to pull data from a local file called “geo-data.json”, which I need to show a map of NYC using D3.js and the topojson library.

I am using Node.js to run the server. My package.json file looks like this:

{
  "name": "inputusername_showlistofusers",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "node server.js"
 },
  "author": "",
  "license": "ISC",
  "dependencies": {
  "node-geocoder": "^3.27.0",
  "ws": "^7.3.0"
 }
}

My Websocket configuration on the client side looks like this:

var wsUri = "ws://localhost:8080";
var ws = new WebSocket(wsUri);

ws.onopen = function (evt) {
    console.log("1. Connected (from Client)")
}

ws.onmessage = function (message) {
    var messageArray = JSON.parse(message.data)
    console.log("5. This is the list of user names:", messageArray)
}

Also, on the client side I am including my D3 code to read the geo data from the “geo-data.json” and the “nyc-streets.json” files by using D3.json:

d3.json('geo-data.json', function (error, data) {
//code
}

d3.json('nyc-streets.json', function (error, data) {
//code
}

On the server side, I am using Websockets to broadcast a message. The code looks like this:

var WebSocket = require("ws");
wss = new WebSocket.Server({ port: 8080 });

wss.on("connection", function connection(ws) {  

    console.log("2. Connected (from Server)")

    ws.on("message", function incoming(message) {

        console.log("3. received from the client ", message);

        wss.clients.forEach(function each(client) {
            if (client.readyState === WebSocket.OPEN) {

                client.send(JSON.stringify(message));
                console.log("7. All names connected: ", message)
             }
        })
    })
})

The problem: when I run server.js using “node server.js”, the code (both on client and server) that requires Websocket runs smoothly, but the one that requires https does not:

d3.json('geo-data.json', function (error, data)    

and I get the following error (I am opening the index.html file using File/Users…):

Access to XMLHttpRequest at 'file:///Users..." from origin 'null' has been blocked by CORS
policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

So I tried to fix this using http-server to run the server and also by making the following change on package.json: “scripts”:{start: “index.html”} However, now the Websocket code does not work, and I get the following error:

(index):112 WebSocket connection to 'ws://localhost:8080/' failed: Error during WebSocket handshake: Unexpected response code: 200

How can I make both HTTP and Websocket requests at the same time?

Thanks in advance.

Answer 1

Gonna post an overwhelming amount of info here and then I'll summarize at the end. Ultimately, Web Sockets is probably not the tool that you want to use. Likely, web sockets is working but it has a subtle difference from what you were expecting. Web Sockets are great for constant communication. A messenger or chat is a great use for this as you will constantly be checking for new messages.

I suggest using express instead. Here is a simple file that should get you started: https://www.tutorialsteacher.com/nodejs/serving-static-files-in-nodejs . It serves all the files that are in a public folder. You may want to move your files into such a folder.

The big issue is that the function d3.json( does not connect to your sockets. It looks up the file locally (which is possible but ultimately results in the CORS security error). That function is responsible for retrieving data. If you called the correct url d3.json('localhost:8080/geo-data.json under the new Express app, then you should have success. You will not need to do anything for network connections on the client side (no websockets or express on your client)