Skip to content

Commit b0b1660

Browse files
toomimtoomim
committed
Braid-HTTP: fix chat demo
1 parent b337910 commit b0b1660

File tree

4 files changed

+79
-70
lines changed

4 files changed

+79
-70
lines changed

‎braid-http/demos/chat/client.html

+54-51
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<script src="braidify-client.js"></script>
1+
<script src="braid-http-client.js"></script>
22
<script type="module">
33
// Imports
44
import { h, Component, render } from 'https://unpkg.com/preact?module'
@@ -32,8 +32,6 @@ <h1>It's a chat!</h1>
3232
}
3333
}
3434

35-
var path = '/chat'
36-
3735
// State
3836
var chat = []
3937
var curr_version = {}
@@ -43,77 +41,82 @@ <h1>It's a chat!</h1>
4341
render_root()
4442

4543
var send_message = async () => {
44+
// Update the text input
4645
var input = document.getElementById('new_stuff'),
4746
post = {text: input.value}
4847
input.value = ''
4948

49+
// Update local state
50+
chat.push(post)
51+
curr_version['/chat'] = [(parseInt(curr_version['/chat'][0]) + 1) + '']
52+
53+
// Re-render UI
54+
render_root()
55+
56+
// Send patch over the network
5057
var patches = [{unit: 'json', range: '[-0:-0]', content: JSON.stringify(post)}]
51-
var url = new URL(path, window.location.href)
52-
var res = await fetch(url, {method: 'put', patches})
58+
var res = await braid_fetch(url, {method: 'put', patches, peer})
5359
if (res.status === 200)
5460
console.debug('put complete')
5561
else
5662
console.debug('put failed with', res.status)
57-
58-
chat.push(post)
59-
curr_version['/chat']++
60-
render_root()
6163
}
6264

63-
// Updates
64-
function connect () {
65-
fetch(
66-
new URL(path, window.location.href),
67-
{subscribe: true},
68-
).andThen(response => {
69-
console.log('Connected!', response)
70-
71-
curr_version[path] = response.version
65+
// Networking
66+
var path = '/chat',
67+
url = new URL(path, window.location.href),
68+
peer = Math.random().toString(36).substr(2)
7269

73-
// When we receive updates, they might come in the form of patches:
74-
if (response.patches)
75-
chat = apply_patches(response.patches, chat)
76-
77-
// Or a complete version:
78-
else
79-
// Beware the server doesn't send these yet.
80-
chat = JSON.parse(response.body)
81-
82-
render_root()
83-
}).catch(e => {
84-
console.log('Reconnecting...')
85-
setTimeout(connect, 4000)
86-
})
87-
}
88-
connect2()
89-
90-
91-
async function connect2 () {
92-
try {
93-
for await (var response of fetch(new URL(path, window.location.href),
94-
{subscribe: true})) {
95-
96-
console.log('Connected!', response)
70+
function connect () {
71+
braid_fetch(url, {subscribe: true, peer}).then(
72+
response => response.subscribe(
73+
update => {
74+
console.log('Got update!', update)
9775

98-
curr_version[path] = response.version
76+
curr_version[path] = update.version
9977

10078
// When we receive updates, they might come in the form of patches:
101-
if (response.patches)
102-
chat = apply_patches(response.patches, chat)
79+
if (update.patches)
80+
chat = apply_patches(update.patches, chat)
10381

10482
// Or a complete version:
10583
else
10684
// Beware the server doesn't send these yet.
107-
chat = JSON.parse(response.body)
85+
chat = JSON.parse(update.body)
10886

10987
render_root()
110-
}
111-
} catch (e) {
112-
console.log('Reconnecting...')
113-
setTimeout(connect2, 4000)
114-
}
88+
},
89+
e => setTimeout(connect, 2000)
90+
)
91+
).catch(e => setTimeout(connect, 2000))
11592
}
11693

94+
connect()
95+
96+
// // The for await version is not currently used
97+
// async function connect2 () {
98+
// try {
99+
// for await (var update of
100+
// braid_fetch(url, {subscribe: true}, peer).subscription) {
101+
// curr_version[path] = update.version
102+
103+
// // When we receive updates, they might come in the form of patches:
104+
// if (update.patches)
105+
// chat = apply_patches(update.patches, chat)
106+
107+
// // Or a complete version:
108+
// else
109+
// // Beware the server doesn't send these yet.
110+
// chat = JSON.parse(update.body)
111+
112+
// render_root()
113+
// }
114+
// } catch (e) {
115+
// console.log('Reconnecting...')
116+
// setTimeout(connect2, 2000)
117+
// }
118+
// }
119+
117120
function apply_patches (patches, object) {
118121
for (var patch of patches)
119122
// There are only two types of patches we could receive

‎braid-http/demos/chat/package.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"dependencies": {
3+
"express": "^4.19.2",
4+
"http2-express-bridge": "^1.0.7"
5+
}
6+
}

‎braid-http/demos/chat/server.js

+15-15
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,17 @@ var resources = {
88
{text: 'This is a post-modern!'}
99
]
1010
}
11-
var chat_version = () => resources['/chat'].length.toString()
11+
var chat_version = () => [resources['/chat'].length.toString()]
1212
var post_versions = {}
1313

1414
// Subscription data
1515
var subscriptions = {}
1616
var subscription_hash = (req) => JSON.stringify([req.headers.peer, req.url])
1717

1818
// Create our HTTP bindings!
19-
var braidify = require('../../braidify-server')
20-
var app = require('express')()
19+
//var braidify = require('../../braid-http-server')
20+
var braidify = require('../../index.js').http_server
21+
var app = require('http2-express-bridge')(require('express'))
2122

2223
// Middleware
2324
app.use(free_the_cors)
@@ -35,7 +36,7 @@ app.get('/chat', (req, res) => {
3536
}
3637

3738
// Send the current version
38-
res.sendVersion({
39+
res.sendUpdate({
3940
version: chat_version(),
4041
body: JSON.stringify(resources['/chat'])
4142
})
@@ -60,7 +61,7 @@ app.put('/chat', async (req, res) => {
6061
if (url === req.url // Send only to subscribers of this URL
6162
&& peer !== req.headers.peer) // Skip the peer that sent this PUT
6263

63-
subscriptions[k].sendVersion({
64+
subscriptions[k].sendUpdate({
6465
version: chat_version(),
6566
patches
6667
})
@@ -73,7 +74,7 @@ app.put('/chat', async (req, res) => {
7374
// Now serve the HTML and client files
7475
var sendfile = (f) => (req, res) => res.sendFile(require('path').join(__dirname, f))
7576
app.get('/', sendfile('client.html'));
76-
app.get('/braidify-client.js', sendfile('../../braidify-client.js'))
77+
app.get('/braid-http-client.js', sendfile('../../braid-http-client.js'))
7778

7879
// Free the CORS!
7980
function free_the_cors (req, res, next) {
@@ -100,15 +101,14 @@ function free_the_cors (req, res, next) {
100101
}
101102

102103
// Launch the https server
103-
var server = require('spdy') // This lets us get HTTP2 with the same API as HTTP1
104-
.createServer(
105-
{
106-
cert: require('fs').readFileSync('./certificate'),
107-
key: require('fs').readFileSync('./private-key'),
108-
allowHTTP1: true
109-
},
110-
app
111-
)
104+
var server = require('http2').createSecureServer(
105+
{
106+
cert: require('fs').readFileSync('./certificate'),
107+
key: require('fs').readFileSync('./private-key'),
108+
allowHTTP1: true
109+
},
110+
app
111+
)
112112
// server.setTimeout(0, x => console.log('Server timeout!', x))
113113
// console.log('Server timeouts:', server.timeout, server.keepAliveTimeout)
114114
server.listen(3009, _=> console.log('listening on port 3009...'))

‎braid-http/readme.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -103,15 +103,15 @@ async function connect () {
103103
async function connect () {
104104
try {
105105
var subscription_iterator = fetch('/chat', {subscribe: true}).subscription
106-
for await (var v of subscription_iterator) {
106+
for await (var update of subscription_iterator) {
107107
// Updates might come in the form of patches:
108-
if (v.patches)
109-
chat = apply_patches(v.patches, chat)
108+
if (update.patches)
109+
chat = apply_patches(update.patches, chat)
110110

111111
// Or complete snapshots:
112112
else
113113
// Beware the server doesn't send these yet.
114-
chat = JSON.parse(v.body)
114+
chat = JSON.parse(update.body)
115115

116116
render_stuff()
117117
}

0 commit comments

Comments
 (0)