Comment construire un URI WebSocket relatif à l'URI de la page ?

Question

Je veux construire un URI WebSocket relatif à l'URI de la page du côté du navigateur. Par exemple, dans mon cas, convertir des URI HTTP tels que

http://example.com:8000/path
https://example.com:8000/path

à

ws://example.com:8000/path/to/ws
wss://example.com:8000/path/to/ws

Ce que je fais actuellement, c'est remplacer les 4 premières lettres "http" par "ws", et y ajouter "/to/ws". Existe-t-il une meilleure méthode pour cela ?

Answer 1

Si votre serveur Web prend en charge les WebSockets (ou un module de gestion des WebSockets), vous pouvez utiliser le même hôte et le même port et modifier simplement le schéma comme vous le montrez. Il existe de nombreuses options pour faire fonctionner ensemble un serveur Web et un serveur/module Websocket.

Je vous suggère d'examiner les différents éléments de window.location global et de les réunir au lieu de procéder à une substitution aveugle de chaîne.

var loc = window.location, new_uri;
if (loc.protocol === "https:") {
    new_uri = "wss:";
} else {
    new_uri = "ws:";
}
new_uri += "//" + loc.host;
new_uri += loc.pathname + "/to/ws";

Notez que certains serveurs Web (par exemple ceux basés sur Jetty) utilisent actuellement le chemin (plutôt que l'en-tête de mise à niveau) pour déterminer si une requête spécifique doit être transmise au gestionnaire WebSocket. Il se peut donc que vous soyez limité dans la possibilité de transformer le chemin d'accès de la manière que vous souhaitez.

Answer 2

Voici ma version qui ajoute le port tcp au cas où il ne serait pas 80 ou 443 :

function url(s) {
    var l = window.location;
    return ((l.protocol === "https:") ? "wss://" : "ws://") + l.hostname + (((l.port != 80) && (l.port != 443)) ? ":" + l.port : "") + l.pathname + s;
}

Edit 1 : Version améliorée selon la suggestion de @kanaka :

function url(s) {
    var l = window.location;
    return ((l.protocol === "https:") ? "wss://" : "ws://") + l.host + l.pathname + s;
}

Edit 2 : Aujourd'hui, je crée le WebSocket ceci :

var s = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/ws");

Answer 3

Utilisation de l'API Window.URL - https://developer.mozilla.org/en-US/docs/Web/API/Window/URL

Fonctionne avec http(s), ports, etc.

var url = new URL('/path/to/websocket', window.location.href);

url.protocol = url.protocol.replace('http', 'ws');

url.href // => ws://www.example.com:9999/path/to/websocket

Answer 4

En supposant que votre serveur WebSocket est à l'écoute sur le même port que celui à partir duquel la page est demandée, je suggère :

function createWebSocket(path) {
    var protocolPrefix = (window.location.protocol === 'https:') ? 'wss:' : 'ws:';
    return new WebSocket(protocolPrefix + '//' + location.host + path);
}

Ensuite, pour votre cas, appelez-le comme suit :

var socket = createWebSocket(location.pathname + '/to/ws');

Answer 5

Facile :

location.href.replace(/^http/, 'ws') + '/to/ws'
// or if you hate regexp:
location.href.replace('http://', 'ws://').replace('https://', 'wss://') + '/to/ws'