@@ -35,7 +35,7 @@ <h5 id="other-identity"></h5>
35
35
</ article >
36
36
37
37
< script type ="module ">
38
- import { createPeer } from "https://esm.sh/jsr/@pulsebeam/peer@0.0.17 " ;
38
+ import { createPeer } from "https://esm.sh/jsr/@pulsebeam/peer@0.0.18 " ;
39
39
40
40
const params = new URLSearchParams ( window . location . search ) ;
41
41
const baseUrl = params . get ( "baseUrl" ) ;
@@ -90,84 +90,84 @@ <h5 id="other-identity"></h5>
90
90
let currentChannel = null ;
91
91
92
92
function updateUIState ( ) {
93
- const isConnected = ! ! currentSession ;
94
- refAction . textContent = isConnected ? "Disconnect" : "Connect" ;
95
- refData . disabled = ! isConnected ;
96
- if ( ! isConnected ) {
97
- refData . value = '' ;
98
- refOtherIdentity . textContent = '' ;
99
- }
93
+ const isConnected = ! ! currentSession ;
94
+ refAction . textContent = isConnected ? "Disconnect" : "Connect" ;
95
+ refData . disabled = ! isConnected ;
96
+ if ( ! isConnected ) {
97
+ refData . value = '' ;
98
+ refOtherIdentity . textContent = '' ;
99
+ }
100
100
}
101
101
102
102
peer . onsession = ( sess ) => {
103
- // For you app consider your UI/UX in what you want to support
104
- // In this app, we only support one session at a time.
105
- // Closes any incoming sessions (connections) in favor of maintaining current session
106
- if ( currentSession ) {
107
- sess . close ( ) ;
108
- // currentSession.close() //TODO: Seems like a bug when in this state
109
- }
110
-
111
- currentSession = sess ;
112
- otherPeerId = sess . other . peerId ;
113
-
114
- updateUIState ( )
115
- const chOut = sess . createDataChannel ( "chat" ) ;
116
- currentChannel = chOut ;
117
-
118
- chOut . onopen = ( ) => {
119
- refOtherIdentity . textContent = `connected to ${ otherPeerId } ` ;
120
- const inputHandler = ( e ) => chOut . send ( e . target . value ) ;
121
- refData . addEventListener ( "input" , inputHandler ) ;
122
- chOut . _inputHandler = inputHandler ;
123
- updateUIState ( ) ;
124
- } ;
103
+ // For you app consider your UI/UX in what you want to support
104
+ // In this app, we only support one session at a time.
105
+ // Closes any incoming sessions (connections) in favor of maintaining current session
106
+ if ( currentSession ) {
107
+ sess . close ( ) ;
108
+ // currentSession.close() //TODO: Seems like a bug when in this state
109
+ }
110
+
111
+ currentSession = sess ;
112
+ otherPeerId = sess . other . peerId ;
125
113
126
- chOut . onclose = cleanup ;
127
- sess . onclose = cleanup ;
128
- sess . ondatachannel = ( e ) => {
129
- const chIn = e . channel ;
130
- chIn . onmessage = ( { data} ) => {
131
- refData . value = data ;
132
- } ;
133
- chIn . onclose = cleanup ;
114
+ updateUIState ( )
115
+ const chOut = sess . createDataChannel ( "chat" ) ;
116
+ currentChannel = chOut ;
117
+
118
+ chOut . onopen = ( ) => {
119
+ refOtherIdentity . textContent = `connected to ${ otherPeerId } ` ;
120
+ const inputHandler = ( e ) => chOut . send ( e . target . value ) ;
121
+ refData . addEventListener ( "input" , inputHandler ) ;
122
+ chOut . _inputHandler = inputHandler ;
123
+ updateUIState ( ) ;
124
+ } ;
125
+
126
+ chOut . onclose = cleanup ;
127
+ sess . onclose = cleanup ;
128
+ sess . ondatachannel = ( e ) => {
129
+ const chIn = e . channel ;
130
+ chIn . onmessage = ( { data} ) => {
131
+ refData . value = data ;
134
132
} ;
133
+ chIn . onclose = cleanup ;
134
+ } ;
135
135
} ;
136
136
137
137
function cleanup ( ) {
138
- if ( currentChannel ) {
139
- if ( currentChannel . _inputHandler ) {
140
- refData . removeEventListener ( "input" , currentChannel . _inputHandler ) ;
141
- }
142
- currentChannel . close ( ) ;
143
- currentChannel = null ;
138
+ if ( currentChannel ) {
139
+ if ( currentChannel . _inputHandler ) {
140
+ refData . removeEventListener ( "input" , currentChannel . _inputHandler ) ;
144
141
}
145
- if ( currentSession ) {
146
- currentSession . close ( ) ;
147
- currentSession = null ;
148
- }
149
- updateUIState ( ) ;
142
+ currentChannel . close ( ) ;
143
+ currentChannel = null ;
144
+ }
145
+ if ( currentSession ) {
146
+ currentSession . close ( ) ;
147
+ currentSession = null ;
148
+ }
149
+ updateUIState ( ) ;
150
150
}
151
151
152
152
let ac = new AbortController ( ) ;
153
153
action . addEventListener ( "click" , async ( ) => {
154
- if ( currentSession || refAction . textContent === "Connecting..." ) {
155
- cleanup ( ) ;
156
- ac . abort ( ) ;
157
- ac = new AbortController ( ) ;
158
- return ;
159
- }
154
+ if ( currentSession || refAction . textContent === "Connecting..." ) {
155
+ cleanup ( ) ;
156
+ ac . abort ( ) ;
157
+ ac = new AbortController ( ) ;
158
+ return ;
159
+ }
160
160
161
- // Only initiate connection if not already connected
162
- try {
163
- refAction . textContent = "Connecting..." ;
164
- otherPeerId = refInput . value ;
165
- console . log ( `connecting to ${ otherGroupId } :${ otherPeerId } ` ) ;
166
- await peer . connect ( otherGroupId , otherPeerId , ac . signal ) ;
167
- } catch ( e ) {
168
- console . error ( `Error in connecting to other peer: ${ e } ` )
169
- cleanup ( ) ;
170
- }
161
+ // Only initiate connection if not already connected
162
+ try {
163
+ refAction . textContent = "Connecting..." ;
164
+ otherPeerId = refInput . value ;
165
+ console . log ( `connecting to ${ otherGroupId } :${ otherPeerId } ` ) ;
166
+ await peer . connect ( otherGroupId , otherPeerId , ac . signal ) ;
167
+ } catch ( e ) {
168
+ console . error ( `Error in connecting to other peer: ${ e } ` )
169
+ cleanup ( ) ;
170
+ }
171
171
} ) ;
172
172
173
173
peer . start ( ) ;
0 commit comments