Skip to content

Commit 295cb00

Browse files
authored
Merge pull request #185 from CS3219-AY2425S1/feature/collab/yjs-monaco
Collab: YJS and Monaco
2 parents 4ea1b08 + d2fff57 commit 295cb00

File tree

10 files changed

+1552
-7072
lines changed

10 files changed

+1552
-7072
lines changed

collab-service/.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
node_modules
1+
node_modules
2+
.env

collab-service/app/server.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@ import http from "http";
33
import index from "./index.js";
44
import { Server } from "socket.io";
55
import { addMessageToChat } from "./model/repository.js";
6+
import ywsUtils from "y-websocket/bin/utils";
7+
import { WebSocketServer } from "ws";
8+
const setupWSConnection = ywsUtils.setupWSConnection;
69

710
const PORT = process.env.PORT || 3002;
811
const server = http.createServer(index);
12+
const docs = ywsUtils.docs;
913

1014
const io = new Server(server, {
1115
cors: {
@@ -16,6 +20,27 @@ const io = new Server(server, {
1620
},
1721
});
1822

23+
const yjsWs = new WebSocketServer({ noServer: true });
24+
yjsWs.on("connection", (conn, req) => {
25+
setupWSConnection(conn, req, {
26+
gc: req.url.slice(1) !== "ws/prosemirror-versions",
27+
});
28+
});
29+
30+
setInterval(() => {
31+
let conns = 0;
32+
docs.forEach((doc) => {
33+
conns += doc.conns.size;
34+
});
35+
const stats = {
36+
conns,
37+
docs: docs.size,
38+
websocket: `ws://localhost:${PORT}`,
39+
http: `http://localhost:${PORT}`,
40+
};
41+
console.log(`${new Date().toISOString()} Stats: ${JSON.stringify(stats)}`);
42+
}, 10000);
43+
1944
io.on("connection", (socket) => {
2045
console.log("User connected to Socket.IO");
2146

@@ -39,6 +64,19 @@ io.on("connection", (socket) => {
3964
});
4065
});
4166

67+
server.on("upgrade", (request, socket, head) => {
68+
const pathname = new URL(request.url, `http://${request.headers.host}`)
69+
.pathname;
70+
71+
if (pathname.startsWith("/yjs")) {
72+
yjsWs.handleUpgrade(request, socket, head, (ws) => {
73+
yjsWs.emit("connection", ws, request);
74+
});
75+
} else {
76+
socket.destroy();
77+
}
78+
});
79+
4280
connectToMongo()
4381
.then(() => {
4482
server.listen(PORT, () => {

collab-service/index.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Socket.IO Test</title>
6+
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
7+
</head>
8+
<body>
9+
<h2>Socket.IO Chat Test</h2>
10+
<input id="roomInput" placeholder="Room ID" />
11+
<button onclick="joinRoom()">Join Room</button>
12+
<br><br>
13+
<input id="messageInput" placeholder="Message" />
14+
<button onclick="sendMessage()">Send Message</button>
15+
<div id="messages"></div>
16+
17+
<script>
18+
const socket = io("http://localhost:3002");
19+
20+
socket.on("connect", () => {
21+
console.log("Connected to Socket.IO server");
22+
});
23+
24+
socket.on("chatMessage", (message) => {
25+
const messagesDiv = document.getElementById("messages");
26+
const messageElem = document.createElement("p");
27+
messageElem.textContent = `Received: ${message.text}`;
28+
messagesDiv.appendChild(messageElem);
29+
});
30+
31+
function joinRoom() {
32+
const roomId = document.getElementById("roomInput").value;
33+
socket.emit("joinRoom", roomId);
34+
console.log(`Joined room: ${roomId}`);
35+
}
36+
37+
function sendMessage() {
38+
const roomId = document.getElementById("roomInput").value;
39+
const text = document.getElementById("messageInput").value;
40+
const message = { roomId, userId: "user1", text };
41+
socket.emit("sendMessage", message);
42+
console.log(`Sent message: ${text}`);
43+
}
44+
</script>
45+
</body>
46+
</html>
47+

0 commit comments

Comments
 (0)