ฉันต้องการสร้าง WebSocket URI ที่สัมพันธ์กับ URI ของเพจที่ด้านเบราว์เซอร์ สมมติว่าในกรณีของฉันแปลง HTTP URI เช่น

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

ถึง

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

สิ่งที่ฉันกำลังทำอยู่คือแทนที่ตัวอักษร 4 ตัวแรก "http" ด้วย "ws" และต่อท้าย "/ to / ws" มีวิธีที่ดีกว่านี้หรือไม่?

หากเว็บเซิร์ฟเวอร์ของคุณรองรับ WebSockets (หรือโมดูลตัวจัดการ WebSocket) คุณสามารถใช้โฮสต์และพอร์ตเดียวกันและเปลี่ยนรูปแบบตามที่คุณแสดงได้ มีตัวเลือกมากมายสำหรับการรันเว็บเซิร์ฟเวอร์และเซิร์ฟเวอร์ / โมดูล Websocket ร่วมกัน

ฉันขอแนะนำให้คุณดูชิ้นส่วนแต่ละชิ้นของ window.location global และรวมเข้าด้วยกันแทนที่จะทำการแทนที่ blind string

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";

โปรดทราบว่าเว็บเซิร์ฟเวอร์บางแห่ง (เช่นเซิร์ฟเวอร์ที่ใช้ Jetty) ใช้เส้นทาง (แทนที่จะเป็นส่วนหัวของการอัปเกรด) เพื่อพิจารณาว่าควรส่งคำขอเฉพาะไปยังตัวจัดการ WebSocket หรือไม่ ดังนั้นคุณอาจถูก จำกัด ว่าคุณสามารถเปลี่ยนเส้นทางในแบบที่คุณต้องการได้หรือไม่

นี่คือเวอร์ชันของฉันที่เพิ่มพอร์ต tcp ในกรณีที่ไม่ใช่ 80 หรือ 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;
}

แก้ไข 1: รุ่นปรับปรุงตามคำแนะนำของ @kanaka:

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

แก้ไข 2: ทุกวันนี้ฉันสร้างสิ่งWebSocketนี้:

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

การใช้ Window.URL API - https://developer.mozilla.org/en-US/docs/Web/API/Window/URL

ทำงานร่วมกับ http (s) พอร์ต ฯลฯ

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

สมมติว่าเซิร์ฟเวอร์ WebSocket ของคุณกำลังฟังบนพอร์ตเดียวกับที่ร้องขอเพจฉันขอแนะนำ:

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

จากนั้นสำหรับกรณีของคุณเรียกสิ่งนี้ว่า:

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

ง่าย:

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

บน localhost คุณควรพิจารณาเส้นทางบริบท

function wsURL(path) {
    var protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://';
    var url = protocol + location.host;
    if(location.hostname === 'localhost') {
        url += '/' + location.pathname.split('/')[1]; // add context path
    }
    return url + path;
}

ใน typescript:

export class WebsocketUtils {

    public static websocketUrlByPath(path) {
        return this.websocketProtocolByLocation() +
            window.location.hostname +
            this.websocketPortWithColonByLocation() +
            window.location.pathname +
            path;
    }

    private static websocketProtocolByLocation() {
        return window.location.protocol === "https:" ? "wss://" : "ws://";
    }

    private static websocketPortWithColonByLocation() {
        const defaultPort = window.location.protocol === "https:" ? "443" : "80";
        if (window.location.port !== defaultPort) {
            return ":" + window.location.port;
        } else {
            return "";
        }
    }
}

การใช้งาน:

alert(WebsocketUtils.websocketUrlByPath("/websocket"));

วิธีแก้ปัญหาง่ายตาย ws และพอร์ตผ่านการทดสอบ:

var ws = new WebSocket("ws://" + window.location.host + ":6666");

ws.onopen = function() { ws.send( .. etc