Real-Time SEC Filings Streaming in Your Browser
This guide will walk you through creating a real-time monitor for SEC filings in your web browser utilizing WebSockets and the Stream API. The provided HTML snippet with embedded JavaScript code initiates a connection to our Stream API. It displays new filings' metadata - accession number, CIK/name/ticker of the filer, and URLs to filing documents like exhibits - as they're released.
Steps to Follow:
- Copy the provided HTML and JavaScript snippet into a file named
stream-api-client.html. Ensure you replaceYOUR_API_KEYon the seventh line with your actual API key. - Open
stream-api-client.htmlin your browser by double-clicking the file. Upon successful connection, you'll see "✅ Connected to Stream API. Awaiting new filings..." If there are any connection issues, an error message "WebSocket error: ERROR_MESSAGE" will appear.
Whenever a new filing is received, an HTML list item (<li>) is dynamically created to display the filing's formType, filedAt, and other properties. This item is then added to the top of the list within <ul id="messages"></ul>. By following these instructions, you'll have a live SEC filings monitor right in your browser, providing you with immediate access to the latest disclosures.
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<title>WebSocket Stream API Example</title>
5
<script>
6
// Update YOUR_API_KEY with your actual API Key
7
const apiKey = 'YOUR_API_KEY';
8
const ws = new WebSocket('wss://stream.sec-api.io?apiKey=' + apiKey);
9
10
ws.onopen = () => {
11
document.getElementById('connectionStatus').innerHTML =
12
'✅ Connected to Stream API. Awaiting new filings...';
13
};
14
15
ws.onerror = (err) => {
16
document.getElementById('connectionStatus').innerHTML =
17
'WebSocket error: ' + err.message;
18
};
19
20
ws.onmessage = (message) => {
21
try {
22
const filings = JSON.parse(message.data);
23
24
for (let filing of filings) {
25
const text = document.createTextNode(filing.formType + ', ' + filing.filedAt);
26
const el = document.createElement('li');
27
el.appendChild(text);
28
document.getElementById('messages').prepend(el);
29
}
30
} catch (error) {
31
console.error('Error parsing message JSON:', error);
32
}
33
};
34
35
ws.onclose = () => {
36
document.getElementById('connectionStatus').innerHTML =
37
'WebSocket disconnected.';
38
};
39
</script>
40
</head>
41
<body>
42
<div id="connectionStatus">Connecting...</div>
43
<ul id="messages"></ul>
44
</body>
45
</html>
Example for Connecting to Deprecated Legacy Endpoints
This example illustrates the process of connecting to legacy streaming endpoints that are marked for deprecation. Please be advised that these endpoints will be phased out on April 5, 2024. To ensure uninterrupted access and take advantage of enhanced functionality, we strongly recommend migrating to the newly available endpoint as soon as possible.
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.4.0/socket.io.js"></script>
5
<script>
6
const socket = io.connect(
7
'https://api.sec-api.io:3334/all-filings?apiKey=YOUR_API_KEY'
8
);
9
10
socket.on('connect', () => {
11
document.getElementById('connectionStatus').innerHTML =
12
'Socket connected. Awaiting new filings.';
13
});
14
15
socket.on('error', (err) => {
16
document.getElementById('connectionStatus').innerHTML =
17
'Socket error: ' + err;
18
});
19
20
socket.on('filing', function (filing) {
21
const text = document.createTextNode(
22
filing.formType + ', ' + filing.filedAt
23
);
24
const el = document.createElement('li');
25
const messages = document.getElementById('messages');
26
27
el.appendChild(text);
28
messages.prepend(el);
29
});
30
</script>
31
</head>
32
<body>
33
<div id="connectionStatus">Connecting...</div>
34
<ul id="messages"></ul>
35
</body>
36
</html>