1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
---
title: WebSocket
slug: Web/API/WebSocket
tags:
- API
- NeedsContent
- NeedsTranslation
- TopicStub
- WebSocket
- WebSockets
translation_of: Web/API/WebSocket
---
<div>{{APIRef("Web Sockets API")}}</div>
<p>The <code>WebSocket</code> object provides the API for creating and managing a <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> connection to a server, as well as for sending and receiving data on the connection.</p>
<p>To construct a <code>WebSocket</code>, use the <code><a href="/en-US/docs/Web/API/WebSocket/WebSocket">WebSocket()</a></code> constructor.</p>
<h2 id="Constructor">Constructor</h2>
<dl>
<dt>{{domxref("WebSocket.WebSocket", "WebSocket(url[, protocols])")}}</dt>
<dd>Returns a newly created <code>WebSocket</code> object.</dd>
</dl>
<h2 id="Constants">Constants</h2>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Constant</td>
<td class="header">Value</td>
</tr>
<tr>
<td><code>WebSocket.CONNECTING</code></td>
<td><code>0</code></td>
</tr>
<tr>
<td><code>WebSocket.OPEN</code></td>
<td><code>1</code></td>
</tr>
<tr>
<td><code>WebSocket.CLOSING</code></td>
<td><code>2</code></td>
</tr>
<tr>
<td><code>WebSocket.CLOSED</code></td>
<td><code>3</code></td>
</tr>
</tbody>
</table>
<h2 id="Properties">Properties</h2>
<dl>
<dt>{{domxref("WebSocket.binaryType")}}</dt>
<dd>The binary data type used by the connection.</dd>
<dt>{{domxref("WebSocket.bufferedAmount")}} {{readonlyinline}}</dt>
<dd>The number of bytes of queued data.</dd>
<dt>{{domxref("WebSocket.extensions")}} {{readonlyinline}}</dt>
<dd>The extensions selected by the server.</dd>
<dt>{{domxref("WebSocket.onclose")}}</dt>
<dd>An event listener to be called when the connection is closed.</dd>
<dt>{{domxref("WebSocket.onerror")}}</dt>
<dd>An event listener to be called when an error occurs.</dd>
<dt>{{domxref("WebSocket.onmessage")}}</dt>
<dd>An event listener to be called when a message is received from the server.</dd>
<dt>{{domxref("WebSocket.onopen")}}</dt>
<dd>An event listener to be called when the connection is opened.</dd>
<dt>{{domxref("WebSocket.protocol")}} {{readonlyinline}}</dt>
<dd>The sub-protocol selected by the server.</dd>
<dt>{{domxref("WebSocket.readyState")}} {{readonlyinline}}</dt>
<dd>The current state of the connection.</dd>
<dt>{{domxref("WebSocket.url")}} {{readonlyinline}}</dt>
<dd>The absolute URL of the WebSocket.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<dl>
<dt>{{domxref("WebSocket.close", "WebSocket.close([code[, reason]])")}}</dt>
<dd>Closes the connection.</dd>
<dt>{{domxref("WebSocket.send", "WebSocket.send(data)")}}</dt>
<dd>Enqueues data to be transmitted.</dd>
</dl>
<h2 id="Events">Events</h2>
<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
<dl>
<dt><code><a href="/en-US/docs/Web/API/WebSocket/close_event">close</a></code></dt>
<dd>Fired when a connection with a <code>WebSocket</code> is closed.<br>
Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onclose">onclose</a></code> property</dd>
<dt><code><a href="/en-US/docs/Web/API/WebSocket/error_event">error</a></code></dt>
<dd>Fired when a connection with a <code>WebSocket</code>has been closed because of an error, such as when some data couldn't be sent.<br>
Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onerror">onerror</a></code> property.</dd>
<dt><code><a href="/en-US/docs/Web/API/WebSocket/message_event">message</a></code></dt>
<dd>Fired when data is received through a <code>WebSocket</code>.<br>
Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onmessage">onmessage</a></code> property.</dd>
<dt><code><a href="/en-US/docs/Web/API/WebSocket/open_event">open</a></code></dt>
<dd>Fired when a connection with a <code>WebSocket</code>is opened.<br>
Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onopen">onopen</a></code> property.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush: js">// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');
// Connection opened
socket.addEventListener('open', function (event) {
socket.send('Hello Server!');
});
// Listen for messages
socket.addEventListener('message', function (event) {
console.log('Message from server ', event.data);
});</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Specification</th>
<th>Status</th>
</tr>
<tr>
<td>{{SpecName("HTML WHATWG", "#the-websocket-interface", "WebSocket")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
<p>{{Compat("api.WebSocket")}}</p>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
</ul>
|
