Instantly share code, notes, and snippets.

Embed
What would you like to do?
simple raw webrtc data connection between two peers with a super-small websocket server

TO RUN

  1. Modify app.js to use the address of your websocket server instead of ws://ws-server:8088.
  2. Run the websocket server: node ws-server.js
  3. Run an HTTP static file server of your choice: python3 -m http.server 8080
  4. Visit index.html or your HTTP static file server root. Do this on 2 different computers or 2 tabs on the same computer.
  5. The screen is blank. Open the Javascript console and set values for me and other. Do the same on the other computer/tab (but inverting the values this time). Then call connect. After the connection is established you'll be able to call channel.send('message') and see the event logs at the other computer/tab.
me = 'bob'
other = 'ana'
me = 'ana'
other = 'bob'
connect()
channel.send('hello, ana!')
var config = {'iceServers': []}
var peer = new RTCPeerConnection(config)
var me
var other
var channel
peer.ondatachannel = function (e) {
channel = e.channel
channel.onopen = e => console.log('channel opened', e)
channel.onclose = e => console.log('channel closed', e)
channel.onmessage = e => console.log('got message', e)
}
peer.onicecandidate = function (e) {
if (!e.candidate) return
console.log('got ice candidate', e)
ws.send(JSON.stringify({
action: 'candidate',
to: other,
data: e.candidate
}))
}
var ws = new WebSocket('ws://ws-server:8088')
ws.onopen = e => console.log('websocket opened')
ws.onclose = e => console.log('websocket closed')
ws.onmessage = e => {
console.log('websocket message', e.data)
var data = JSON.parse(e.data)
if (data.to === me) {
switch (data.action) {
case 'candidate':
peer.addIceCandidate(new RTCIceCandidate(data.data))
.then(() => console.log('added ice candidate'))
.catch(e => console.log('add ice error', e))
break
case 'offer':
peer.setRemoteDescription(new RTCSessionDescription(data.data))
.then(() => peer.createAnswer())
.then(sdp => {
ws.send(JSON.stringify({
action: 'answer',
to: other,
data: sdp
}))
peer.setLocalDescription(sdp)
})
.then(() => console.log('offer handled'))
.catch(e => console.log('error handling offer', e))
break
case 'answer':
peer.setRemoteDescription(new RTCSessionDescription(data.data))
.then(() => console.log('answer handled'))
.catch(e => console.log('error handling answer', e))
break
}
}
}
// trigger connection
function connect () {
channel = peer.createDataChannel('main-channel')
channel.onopen = e => console.log('channel opened', e)
channel.onclose = e => console.log('channel closed', e)
channel.onmessage = e => console.log('got message', e)
peer.createOffer()
.then(sdp => {
peer.setLocalDescription(sdp)
ws.send(JSON.stringify({
action: 'offer',
to: other,
data: sdp
}))
})
.catch(e => console.log('error creating and sending offer', e))
}
<!doctype html>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="app.js"></script>
var WebSocketServer = require('ws').Server
var wss = new WebSocketServer({port: 8088})
var wsList = []
wss.on('connection', function (ws) {
console.log('WS connection established!')
wsList.push(ws)
ws.on('close', function () {
wsList.splice(wsList.indexOf(ws), 1)
console.log('WS closed!')
})
ws.on('message', function (message) {
console.log('got ws message: ' + message)
// send to everybody on the site
wsList.forEach(function (ws) {
ws.send(message)
})
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment