341 lines
12 KiB
HTML
341 lines
12 KiB
HTML
{% extends "_layout.html" %}
|
|
{% block title %}ChatBox{% endblock %}
|
|
{% block pagestylesheet %}
|
|
<link rel="stylesheet" href="/static/index.css" />
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div id="app">
|
|
<div id="message-list">
|
|
|
|
</div>
|
|
<div id="inputs">
|
|
<select id="peers">
|
|
|
|
</select>
|
|
<input id="message-input" />
|
|
<input type="file" id="sendfile" disabled/>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block pagescripts %}
|
|
<script>
|
|
(() => {
|
|
let message_list = document.getElementById("message-list")
|
|
let peers = document.getElementById("peers")
|
|
let inputbox = document.getElementById("message-input")
|
|
let sendfile = document.getElementById("sendfile")
|
|
|
|
let search = new URLSearchParams(location.search);
|
|
let sender = search.get("name") || "";
|
|
|
|
let room = search.get("room") || "public";
|
|
|
|
let peerMap = new Map();
|
|
let channelMap = new Map();
|
|
|
|
let ws;
|
|
let wsReconnectInterval = 5000;
|
|
|
|
const MessageBootstrap = "Bootstrap";
|
|
const MessageDiscoverRequest = "DiscoverRequest";
|
|
const MessageDiscoverResponse = "DiscoverResponse";
|
|
const MessageSessionOffer = "SessionOffer";
|
|
const MessageSessionAnswer = "SessionAnswer";
|
|
const MessageICECandidate = "IceCandidate";
|
|
|
|
let updateSendfile = () => {
|
|
if (peers.value != "") {
|
|
sendfile.removeAttribute("disabled")
|
|
} else {
|
|
sendfile.setAttribute("disabled", "")
|
|
}
|
|
}
|
|
peers.addEventListener("change", updateSendfile)
|
|
sendfile.addEventListener("change", async (ev) => {
|
|
let file = sendfile.files[0]
|
|
sendfile.value = ""
|
|
|
|
let peer = peerMap.get(peers.value)
|
|
if (!peer) {
|
|
return
|
|
}
|
|
display(`你给 ${peers.value} 传了一个文件: ${file.name}。传输中...`)
|
|
|
|
let reader = new FileReader()
|
|
let dc = peer.createDataChannel(`file:${file.name}`)
|
|
reader.addEventListener("load", (ev) => {
|
|
dc.send(reader.result)
|
|
dc.close()
|
|
})
|
|
dc.addEventListener("open", () => {
|
|
reader.readAsArrayBuffer(file)
|
|
})
|
|
})
|
|
|
|
const createNode = (tag, ...children) => {
|
|
let node = document.createElement(tag)
|
|
children.forEach(child => {
|
|
if(typeof child === "string") {
|
|
let inner = document.createElement("span")
|
|
inner.innerHTML = child
|
|
node.appendChild(inner)
|
|
} else if (child instanceof HTMLElement) {
|
|
node.appendChild(child)
|
|
} else {
|
|
console.log("child is not a node: ", child, typeof child)
|
|
}
|
|
})
|
|
return node
|
|
}
|
|
|
|
const display = (...message) => {
|
|
let scrollToBottom = Math.abs(message_list.scrollHeight - message_list.scrollTop - message_list.clientHeight) < 1;
|
|
message_list.appendChild(createNode("div",
|
|
`${new Date().toTimeString()}: `,
|
|
...message
|
|
))
|
|
if(scrollToBottom) {
|
|
message_list.scrollTo({
|
|
top: message_list.scrollHeight
|
|
})
|
|
}
|
|
}
|
|
|
|
inputbox.addEventListener("keyup", (e) => {
|
|
if (!(e.key === 'Enter' || e.keyCode === 13)) {
|
|
return
|
|
}
|
|
if (!inputbox.value || inputbox.value.trim().length == 0) {
|
|
return
|
|
}
|
|
let channel = channelMap.get(peers.value)
|
|
if (!channel) {
|
|
return
|
|
}
|
|
|
|
display(`你 -> ${peers.value}: ${inputbox.value}`)
|
|
channel.send(inputbox.value)
|
|
inputbox.value = ""
|
|
})
|
|
|
|
const addPeer = (peerName) => {
|
|
display(`连接上了 ${peerName}`)
|
|
|
|
let newNode = document.createElement("option")
|
|
newNode.id = peerName
|
|
newNode.setAttribute("value", peerName)
|
|
newNode.innerHTML = peerName;
|
|
peers.appendChild(newNode)
|
|
|
|
updateSendfile()
|
|
}
|
|
const removePeer = (peerName) => {
|
|
display(`${peerName} 走了...`)
|
|
let el = document.getElementById(peerName);
|
|
if(el) el.remove()
|
|
|
|
updateSendfile()
|
|
}
|
|
|
|
let timeout;
|
|
|
|
let reconnect = () => {
|
|
if(ws && (ws.readyState == WebSocket.CONNECTING || ws.readyState == WebSocket.OPEN)) {
|
|
return;
|
|
}
|
|
|
|
let protocol = "ws://";
|
|
if (location.protocol === "https:") {
|
|
protocol = "wss://"
|
|
}
|
|
|
|
ws = new WebSocket(protocol+location.host+"/ws");
|
|
ws.addEventListener("error", reconnect)
|
|
ws.addEventListener("close", reconnect)
|
|
|
|
ws.addEventListener("message", ({data}) => {
|
|
handle_ws_message(JSON.parse(data))
|
|
})
|
|
ws.addEventListener("open", () => {
|
|
display("服务器连上啦。你等等，给你起个名字...")
|
|
ws.send(JSON.stringify({
|
|
message: {
|
|
type: MessageBootstrap,
|
|
},
|
|
room,
|
|
sender,
|
|
}))
|
|
})
|
|
}
|
|
|
|
let handle_ws_message = (wsMessage) => {
|
|
let recreateAndSetupPeer = async (peerName) => {
|
|
if (!peerMap.has(peerName)) {
|
|
|
|
let peer = new RTCPeerConnection({
|
|
iceServers: [{ urls: ["stun:nhz.jeffthecoder.xyz:3478", "stun:nhz.jeffthecoder.xyz:3479", "stun:nhz.jeffthecoder.xyz:13478"] }]
|
|
})
|
|
peer.addEventListener("signalingstatechange", (ev) => {
|
|
console.log("signaling state changed: ", peer.signalingState)
|
|
})
|
|
peer.addEventListener("connectionstatechange", (ev) => {
|
|
console.log("peer connection state changed: ", peer.connectionState)
|
|
switch (peer.connectionState) {
|
|
case "closed":
|
|
break;
|
|
case "disconnected":
|
|
case "failed":
|
|
peer.restartIce()
|
|
break
|
|
}
|
|
})
|
|
peer.addEventListener("icecandidate", (ev) => {
|
|
if (!ev.candidate) {
|
|
console.log("gather end")
|
|
return
|
|
}
|
|
let candidate = ev.candidate.toJSON()
|
|
ws.send(JSON.stringify({
|
|
message: {
|
|
type: MessageICECandidate,
|
|
candidate: JSON.stringify(candidate),
|
|
sender,
|
|
kind: 3,
|
|
},
|
|
room,
|
|
sender,
|
|
receiver: wsMessage.sender,
|
|
}))
|
|
})
|
|
peer.addEventListener("icegatheringstatechange", ev => {
|
|
console.log("gather", peer.iceGatheringState)
|
|
})
|
|
peer.addEventListener("datachannel", ({channel}) => {
|
|
if(channel.label === "chat") {
|
|
channelMap.set(peerName, channel);
|
|
channel.addEventListener("open", (ev) => {
|
|
addPeer(peerName)
|
|
})
|
|
channel.addEventListener("message", (ev) => {
|
|
display(`${peerName} -> You: ${ev.data}`)
|
|
})
|
|
channel.addEventListener("close", () => {
|
|
removePeer(peerName)
|
|
})
|
|
} else if (channel.label.startsWith("file:")) {
|
|
let filename = channel.label.substr(5)
|
|
let buffers = [];
|
|
channel.addEventListener("open", ev => {
|
|
display(`${peerName} 给你发了一个文件: ${filename}。 接收中...`)
|
|
})
|
|
channel.addEventListener("message", ev => {
|
|
buffers.push(ev.data)
|
|
})
|
|
channel.addEventListener("close", () => {
|
|
var link = document.createElement('a');
|
|
link.href = window.URL.createObjectURL(new Blob(buffers));
|
|
link.download = filename;
|
|
link.innerHTML = filename
|
|
display(
|
|
"文件：",
|
|
link,
|
|
)
|
|
})
|
|
}
|
|
})
|
|
|
|
peerMap.set(peerName, peer);
|
|
}
|
|
let peer = peerMap.get(peerName);
|
|
|
|
let resultSdp = null, resultMessageType;
|
|
if(wsMessage.message.type === MessageDiscoverResponse) {
|
|
let channel = peer.createDataChannel("chat");
|
|
channel.addEventListener("open", (ev) => {
|
|
addPeer(peerName)
|
|
})
|
|
channel.addEventListener("message", (ev) => {
|
|
display(`${peerName} -> 你: ${ev.data}`)
|
|
})
|
|
channel.addEventListener("close", () => {
|
|
removePeer(peerName)
|
|
})
|
|
channelMap.set(peerName, channel);
|
|
|
|
|
|
resultSdp = await peer.createOffer();
|
|
resultMessageType = MessageSessionOffer;
|
|
peer.setLocalDescription(resultSdp)
|
|
console.log("set local offer")
|
|
} else {
|
|
peer.setRemoteDescription(JSON.parse(wsMessage.message.sdp))
|
|
console.log("set remote offer")
|
|
resultSdp = await peer.createAnswer();
|
|
resultMessageType = MessageSessionAnswer;
|
|
peer.setLocalDescription(resultSdp)
|
|
console.log("set local answer")
|
|
}
|
|
|
|
ws.send(JSON.stringify({
|
|
message: {
|
|
type: resultMessageType,
|
|
sdp: JSON.stringify(resultSdp),
|
|
sender,
|
|
kind: 3,
|
|
},
|
|
room,
|
|
sender,
|
|
receiver: wsMessage.sender,
|
|
}))
|
|
}
|
|
|
|
let peer = peerMap.get(wsMessage.sender)
|
|
|
|
switch (wsMessage.message.type) {
|
|
case MessageBootstrap:
|
|
sender = wsMessage.sender;
|
|
ws.send(JSON.stringify({
|
|
message: {
|
|
type: MessageDiscoverRequest,
|
|
},
|
|
room,
|
|
sender: wsMessage.sender,
|
|
}))
|
|
display(`决定了，就叫 ${sender}. 我们等等小伙伴吧...`)
|
|
break;
|
|
case MessageDiscoverRequest:
|
|
display(`正在尝试连接 ${wsMessage.sender}`)
|
|
ws.send(JSON.stringify({
|
|
message: {
|
|
type: MessageDiscoverResponse,
|
|
},
|
|
room,
|
|
sender,
|
|
receiver: wsMessage.sender,
|
|
}))
|
|
break
|
|
case MessageDiscoverResponse:
|
|
recreateAndSetupPeer(wsMessage.sender)
|
|
break;
|
|
case MessageSessionOffer:
|
|
recreateAndSetupPeer(wsMessage.sender)
|
|
break
|
|
case MessageSessionAnswer:
|
|
console.log("set remote answer")
|
|
peer.setRemoteDescription(JSON.parse(wsMessage.message.sdp))
|
|
peer.restartIce()
|
|
break
|
|
case MessageICECandidate:
|
|
let candidate = JSON.parse(wsMessage.message.candidate);
|
|
if(!peer) {
|
|
console.warn("candidate dropped", candidate)
|
|
return
|
|
}
|
|
peer.addIceCandidate(candidate)
|
|
}
|
|
}
|
|
|
|
reconnect()
|
|
})()
|
|
</script>
|
|
{% endblock %} |