पेज URI के सापेक्ष WebSocket URI का निर्माण कैसे करें?

Question

मैं ब्राउज़र साइड में पेज URI के सापेक्ष एक WebSocket URI का निर्माण करना चाहता हूं। कहो, मेरे मामले में जैसे HTTP URIs कन्वर्ट

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" में जोड़ें। क्या इसके लिए कोई बेहतर तरीका है?

Comments

आपका क्या मतलब है path/to/ws? यह वास्तव में कहाँ जाता है? धन्यवाद

— Slevin

Answer 1

यदि आपके वेब सर्वर को WebSockets (या एक WebSocket हैंडलर मॉड्यूल) के लिए समर्थन है, तो आप उसी होस्ट और पोर्ट का उपयोग कर सकते हैं और बस इस योजना को बदल सकते हैं जैसे आप दिखा रहे हैं। वेब सर्वर और Websocket सर्वर / मॉड्यूल को एक साथ चलाने के लिए कई विकल्प हैं।

मैं आपको सुझाव दूंगा कि आप विंडो के अलग-अलग हिस्सों को देखें। वैश्विक स्तर पर और ब्लाइंड स्ट्रिंग प्रतिस्थापन करने के बजाय उन्हें एक साथ जोड़ दें।

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

ध्यान दें कि कुछ वेब सर्वर (यानी जेटी आधारित) वर्तमान में पथ का उपयोग करते हैं (अपग्रेड हेडर के बजाय) यह निर्धारित करने के लिए कि क्या वेबस्केट हैंडलर पर एक विशिष्ट अनुरोध पारित किया जाना चाहिए। इसलिए आप इस बात में सीमित हो सकते हैं कि क्या आप अपनी इच्छानुसार मार्ग बदल सकते हैं।

Comments

पाथनाम का उपयोग करके मुझे ऐसे url मिलते हैं: 'ws: // localhost: 8080 / Chat / index.html / chat'। और यह रक्तस्रावी url है।

— डेनिस 535

@ विशमास्टर 35 जो कि संभाला जाता है, आपके उपयोग के मामले और सेटअप पर निर्भर करता है। यह निर्धारित करने के लिए कोई निश्चित-आग का तरीका नहीं है कि example.com/part1/part2 part1 नाम की फ़ाइल को संदर्भित करता है जिसे part1 कहा जाता है, या w1 पार्ट 2 part1 के भीतर एक निर्देशिका है, या कुछ पूरी तरह से अलग है (जैसे part1 और part2 के अंदर कुंजियाँ हैं एक वस्तु डेटाबेस)। एक URL में "पथ" का अर्थ वेब सर्वर और उसके कॉन्फ़िगरेशन तक है। आप अनुमान लगा सकते हैं कि "* .html" में समाप्त होने वाली कोई भी चीज़ छीन ली जानी चाहिए। लेकिन फिर से, यह आपके विशिष्ट सेटअप और आवश्यकताओं पर निर्भर करेगा।

— kanaka

@socketpair नहीं, पोर्ट है। window.location.host में होस्टनाम और पोर्ट (स्थान है ।होस्टनाम केवल होस्टनाम है)।

— कनक

क्या मैं बाहर निकल सकता हूं "/to/ws"? यदि नहीं, तो उस हिस्से का मूल्य क्या होना चाहिए?

— tet

@ यह है कि आरंभिक WebSocket कनेक्शन स्थापित होने पर GET अनुरोध पथ (यानी HTTP GET पथ) का उपयोग किया जाता है। इसका उपयोग किया जाता है या नहीं यह आपके सेटअप पर निर्भर करता है। यदि आपके पास एक एकल उद्देश्य वेबसोकेट सर्वर है (जो स्थैतिक वेब फ़ाइलों की सेवा के लिए भी हो सकता है) तो संभवतः इसे अनदेखा कर दिया जाता है। यदि आपके पास समर्पित वेब सर्वर के पीछे कई वेबसोकेट सर्वर हैं, तो संभवतया सही वेबसोकेट सर्वर के लिए मार्ग का उपयोग किया जा रहा है। वेबस्कैट सर्वर द्वारा अन्य प्रयोजनों के लिए भी पथ का उपयोग किया जा सकता है, जैसे कि पासिंग टोकन (जैसे क्वेरी परमेस के माध्यम से), इत्यादि

— kanaka

Answer 2

यहाँ मेरा संस्करण है जो 80 या 443 के मामले में tcp पोर्ट को जोड़ता है:

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

Comments

तुम बस location.hostname के बजाय location.host का उपयोग बंदरगाह mangling करने की ज़रूरत नहीं है,

— kanaka

Answer 3

Window.URL API का उपयोग करना - https://developer.mozilla.org/en-US/docs/Web/API/Window/URL

HTTP (एस), बंदरगाहों आदि के साथ काम करता है।

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

Comments

मुझे यह उल्लेख करना चाहिए कि यह भी https / wss ('http' की जगह 'ws' => 'https' => 'wss') के साथ काम करता है

— Eadz

Answer 4

मान लें कि आपका 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');

Comments

स्थान.पथ सही नहीं है। आपको pathname का उपयोग करना चाहिए।

— डेनिस ५३५

@ विशमास्टर 35: अच्छी पकड़! फिक्स्ड।

— पावेल

Answer 5

आसान:

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

Comments

मैं का प्रयोग करेंगे /^http/बजाय 'http'सिर्फ मामले httpURL बार के अंदर है।

— phk

window.location.href में पूर्ण पथ शामिल है, इसलिए आप / page.html

— path/

यदि आपके स्थान में http हो तो समस्याग्रस्त हो सकते हैं। उदाहरण के लिए: testhttp.com/http.html

— किस

बस 'http: //' को 'ws: //' से बदल दें। यह सरल विचार किसी भी डेवलपर्स के लिए स्पष्ट होना चाहिए, यहां तक ​​कि जूनियर्स

— मेक्सिम कोस्ट्रोमिन

Answer 6

लोकलहोस्ट पर आपको संदर्भ पथ पर विचार करना चाहिए।

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

Comments

संदर्भ पथ क्या है?

— amirouche

Answer 7

टाइपस्क्रिप्ट में:

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