blocks|key|1072186|text|更多的是一种替代解决方案，但所有现代浏览器都会将域cookie与连接一起发送，因此使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1072187|var+authToken+=+'R3YKZFKBVi';

document.cookie+=+'X-Authorization='+%2B+authToken+%2B+';+path=/';

var+ws+=+new+WebSocket(
++++'wss://localhost:9000/wss/'
);|code-block|syntax|javascript|1072188|以请求连接头结束：|1072189|Cookie:+X-Authorization=R3YKZFKBVi|1072190|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

More of an alternate solution, but all modern browsers send the domain cookies along with the connection, so using:

<pre><code>var authToken = 'R3YKZFKBVi';

document.cookie = 'X-Authorization=' + authToken + '; path=/';

var ws = new WebSocket(
 'wss://localhost:9000/wss/'
);
</code></pre>

End up with the request connection headers:

<pre><code>Cookie: X-Authorization=R3YKZFKBVi
</code></pre>

blocks|key|857487|text|当您需要使用JavaScript+WebSockets接口建立WebSockets连接时，不能发送自定义头部。您可以通过使用第二个WebSocket类构造函数来使用Subprotocols头：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|857488|var+ws+=+new+WebSocket("ws://example.com/service",+"soap");|code-block|syntax|javascript|857489|然后，您可以在服务器上使用Sec-WebSocket-Protocol密钥获得子协议报头。|857490|还有一个限制，子协议标头的值不能包含逗号(,)！|857491|entityMap^0|2A|C|0|0|D|M|0|L|1|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

You can not send custom header when you want to establish WebSockets connection using JavaScript WebSockets API.
You can use <code>Subprotocols</code> headers by using the second WebSocket class constructor:

<pre><code>var ws = new WebSocket("ws://example.com/service", "soap");
</code></pre>

and then you can get the Subprotocols headers using <code>Sec-WebSocket-Protocol</code> key on the server.

There is also a limitation, your Subprotocols headers values can not contain a comma (<code>,</code>) !

blocks|key|857573|text|您不能添加头，但如果您只需要在连接时将值传递到服务器，则可以在url上指定查询字符串部分：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|857574|var+ws+=+new+WebSocket("ws://example.com/service?key1=value1&key2=value2");|code-block|syntax|javascript|857575|该URL是有效的，但是--当然--您需要修改服务器代码来解析它。|857576|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You cannot add headers but, if you just need to pass values to the server at the moment of the connection, you can specify a query string part on the url:

<pre><code>var ws = new WebSocket("ws://example.com/service?key1=value1&amp;key2=value2");
</code></pre>

That URL is valid but - of course - you'll need to modify your server code to parse it.

blocks|key|1072143|text|完全是这样的，感谢kanaka的回答。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1072144|客户端：|1072145|var+ws+=+new+WebSocket(
++++'ws://localhost:8080/connect/'+%2B+this.state.room.id,+
++++store('token')+%7C%7C+cookie('token')+
);|code-block|syntax|javascript|1072146|服务器(在本例中使用Koa2，但在任何地方都应该类似)：|1072147|var+url+=+ctx.websocket.upgradeReq.url;+//+can+use+to+get+url/query+params
var+authToken+=+ctx.websocket.upgradeReq.headers['sec-websocket-protocol'];
//+Can+then+decode+the+auth+token+and+do+any+session/user+stuff...|1072148|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Totally hacked it like this, thanks to kanaka's answer.

Client:

<pre><code>var ws = new WebSocket(
 'ws://localhost:8080/connect/' + this.state.room.id, 
 store('token') || cookie('token') 
);
</code></pre>

Server (using Koa2 in this example, but should be similar wherever):

<pre><code>var url = ctx.websocket.upgradeReq.url; // can use to get url/query params
var authToken = ctx.websocket.upgradeReq.headers['sec-websocket-protocol'];
// Can then decode the auth token and do any session/user stuff...
</code></pre>

blocks|key|1072271|text|对于那些在2021年仍在苦苦挣扎的人，Node全局web套接字类在构造函数中有一个额外的options字段。如果您转到WebSockets类的实现，您会发现这个变量声明。您可以看到它接受三个参数url，这是必需的，protocols(可选)，它可以是一个字符串，一个字符串数组或null。然后是第三个参数，即options。我们的兴趣，对象和(仍然是可选的)。你看..。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1072272|declare+var+WebSocket:+{
++++prototype:+WebSocket;
++++new+(
++++++++uri:+string,
++++++++protocols?:+string+%7C+string[]+%7C+null,
++++++++options?:+{
++++++++++++headers:+{+[headerName:+string]:+string+};
++++++++++++[optionName:+string]:+any;
++++++++}+%7C+null,
++++):+WebSocket;
++++readonly+CLOSED:+number;
++++readonly+CLOSING:+number;
++++readonly+CONNECTING:+number;
++++readonly+OPEN:+number;
};|code-block|syntax|javascript|1072273|如果您使用的是像react这样的Node+Js库，请使用react-native。这里有一个如何做到这一点的例子。|1072274|+const+ws+=+new+WebSocket(WEB_SOCKETS_URL,+null,+{
++++headers:+{
++++++['Set-Cookie']:+cookie,
++++},
++});|1072275|注意，对于协议，我传递了null。如果您使用的是jwt，则可以使用Bearer+%2B+token传递Authorisation标头|1072276|免责声明，这可能不是所有浏览器都支持的，从MDN+web文档中，您可以看到只有两个参数被记录下来。请参阅https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket#syntax|1072277|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket#syntax^0|18|7|2P|3|2Z|9|4A|7|0|0|0|0|X|6|16|5|0|1G|23|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|S|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

For those still struggling in 2021, Node JS global web sockets class has an additional <code>options</code> field in the constructor. if you go to the implementation of the the WebSockets class, you will find this variable declaration. You can see it accepts three params <code>url</code>, which is required, <code>protocols</code>(optional), which is either a string, an array of strings or null. Then a third param which is <code>options</code>. our interest, an object and (still optional). see ...
<pre><code>declare var WebSocket: {
 prototype: WebSocket;
 new (
 uri: string,
 protocols?: string | string[] | null,
 options?: {
 headers: { [headerName: string]: string };
 [optionName: string]: any;
 } | null,
 ): WebSocket;
 readonly CLOSED: number;
 readonly CLOSING: number;
 readonly CONNECTING: number;
 readonly OPEN: number;
};
</code></pre>
If you are using a Node Js library like react , react-native. here is an example of how you can do it.
<pre><code> const ws = new WebSocket(WEB_SOCKETS_URL, null, {
 headers: {
 ['Set-Cookie']: cookie,
 },
 });
</code></pre>
Notice for the protocols I have passed null. If you are using jwt, you can pass the Authorisation header with <code>Bearer</code> + <code>token</code>
Disclaimer, this might not be supported by all browsers outside the box, from the MDN web docs you can see only two params are documented.
see <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket#syntax" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket#syntax</a>

blocks|key|1072225|text|致所有未来的调试器-直到今天，即15-07-21|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1072226|浏览器也不支持将客户标头发送到服务器，因此任何此类代码|1072227|++++import+*+as+sock+from+'websocket'
++++const+headers+=+{
++++++++Authorization:+"bearer+"+%2B+token
++++};
++++console.log(headers);

++++const+wsclient+=+new+sock.w3cwebsocket(
++++++++'wss://'+%2B+'myserver.com'+%2B+'/api/ws',
++++++++'',
++++++++'',
++++++++headers,
++++++++null
++++);|code-block|syntax|javascript|1072228|这在浏览器中是行不通的。这背后的原因是浏览器本机Websocket构造函数不接受头部。|1072229|您很容易被误导，因为w3cwebsocket+contractor接受标题，如我上面所示。然而，这在node.js中是有效的。|1072230|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

to all future debugger - until today i.e 15-07-21
Browser also don't support sending customer headers to the server, so any such code
<pre><code> import * as sock from 'websocket'
 const headers = {
 Authorization: &quot;bearer &quot; + token
 };
 console.log(headers);

 const wsclient = new sock.w3cwebsocket(
 'wss://' + 'myserver.com' + '/api/ws',
 '',
 '',
 headers,
 null
 );
</code></pre>
This is not going to work in browser. The reason behind that is browser native Websocket constructor does not accept headers.
You can easily get misguided because w3cwebsocket contractor accepts headers as i have shown above. This works in node.js however.

blocks|key|1072079|text|从技术上讲，您将在协议升级阶段之前通过connect函数发送这些标头。这在我的一个nodejs项目中很有效：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1072080|var+WebSocketClient+=+require('websocket').client;
var+ws+=+new+WebSocketClient();
ws.connect(url,+'',+headers);|code-block|syntax|javascript|1072081|entityMap^0|15|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Technically, you will be sending these headers through the connect function before the protocol upgrade phase. This worked for me in a <code>nodejs</code> project:

<pre><code>var WebSocketClient = require('websocket').client;
var ws = new WebSocketClient();
ws.connect(url, '', headers);
</code></pre>

Looks like it's easy to add custom HTTP headers to your websocket client with any HTTP header client which supports this, but I can't find how to do it with the JSON API. 

Yet, it seems that there should be support <a href="http://www.tbray.org/drafts/wsock-00#anchor10" rel="noreferrer">these headers in the spec</a>.

Anyone has a clue on how to achieve it? 

<pre><code>var ws = new WebSocket("ws://example.com/service");
</code></pre>

Specifically, I need to be able to send an HTTP Authorization header.

HTTP headers in Websockets client API

服务器

调试器

JSON

使用任何支持此功能的HTTP头客户端，似乎很容易将自定义HTTP头添加到您的websocket客户端，但我不知道如何使用JSON API来做这件事。然而，似乎应该有支持。有谁知道如何做到这一点？var ws = new WebSocket("ws://example.com/service");具体地说，我需要能够发送HTTP Authorization头。

问Websockets客户端API中的HTTP标头
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Websockets客户端API中的HTTP标头EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Websockets客户端API中的HTTP标头
EN