Skip to content

Commit

Permalink
Replace dropdown user list with input field for recipient UUID (#2)
Browse files Browse the repository at this point in the history 
* Replace dropdown user list with input field for recipient UUID

* Update tests

* Update Image & Video Demos [README]
  • Loading branch information
@KafetzisThomas
KafetzisThomas authored Sep 24, 2024
1 parent 977b2dd commit 7aa7ee7
Show file tree
Hide file tree
Showing 5 changed files with 8 additions and 127 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,17 +93,17 @@ $ python3 manage.py test fileshare.tests

## Demo Image

![Screenshot 2024-09-23 112921](https://github.com/user-attachments/assets/84cc69ad-6f52-4a5e-8a52-3b392e46925f)
![fileshare](https://github.com/user-attachments/assets/df026073-42c8-43f9-92ce-b57b0e9a01b6)

## Demo Videos

### User 1

https://github.com/user-attachments/assets/608b68d8-2a38-409d-b2f3-6f0ac4fdabca
https://github.com/user-attachments/assets/10552c38-0d08-4040-9fb5-e9093528b5ef

### User 2

https://github.com/user-attachments/assets/194f07a2-dd38-43a7-a418-e481e50332ce
https://github.com/user-attachments/assets/f07322d1-35b1-4569-b496-c61578b32e1b

## Contributing Guidelines for FileShare

Expand Down
67 changes: 0 additions & 67 deletions fileshare/consumers.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,9 @@ class FileTransferConsumer(AsyncWebsocketConsumer):
based on unique identifiers.
"""

connected_users = set() # Track all connected users

async def connect(self):
"""
Assign a unique ID to the connected user.
Update the list of connected peers.
"""
# Generate a unique ID for the connected user
self.user_id = str(uuid.uuid4())[:10]
Expand All @@ -33,9 +30,6 @@ async def connect(self):

await self.accept()

# Add the user to the set of connected users
self.connected_users.add(self.user_id)

# Send the unique ID back to the user for display
await self.send(
text_data=json.dumps(
Expand All @@ -46,47 +40,12 @@ async def connect(self):
)
)

# Send the list of already connected users,
# to the new user (excluding themselves)
await self.send(
text_data=json.dumps(
{
"type": "connected_users",
"users": list(
self.connected_users - {self.user_id}
), # Exclude the current user
}
)
)

# Update the list of connected peers
await self.channel_layer.group_send(
self.room_group_name,
{
"type": "user_connected",
"user_id": self.user_id,
},
)

async def disconnect(self, close_code):
"""
Remove the user from the group when they disconnect.
Update the list of connected peers.
"""
await self.channel_layer.group_discard(self.room_group_name, self.channel_name)

# Remove the user from the connected users set
self.connected_users.discard(self.user_id)

# Update the list of connected peers
await self.channel_layer.group_send(
self.room_group_name,
{
"type": "user_disconnected",
"user_id": self.user_id,
},
)

async def receive(self, text_data):
"""
Handle incoming files from specific users based on user_id.
Expand Down Expand Up @@ -161,29 +120,3 @@ async def send_file(self, event):
}
)
)

async def user_connected(self, event):
"""
Update the list of connected peers when a user joins.
"""
await self.send(
text_data=json.dumps(
{
"type": "user_connected",
"user_id": event["user_id"],
}
)
)

async def user_disconnected(self, event):
"""
Update the list of connected peers when a user leaves.
"""
await self.send(
text_data=json.dumps(
{
"type": "user_disconnected",
"user_id": event["user_id"],
}
)
)
39 changes: 1 addition & 38 deletions fileshare/static/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,6 @@ socket.onmessage = function (e) {
document.getElementById('myUserId').innerHTML = myUserId;
}

// Populate the list of already connected users (sent when a new user connects)
if (data.type === 'connected_users') {
data.users.forEach(userId => {
addUserOption(userId);
});
}

// Add a newly connected user to the dropdown list, excluding the current user
if (data.type === 'user_connected' && data.user_id !== myUserId) {
addUserOption(data.user_id);
}

// Remove a disconnected user from the dropdown list
if (data.type === 'user_disconnected') {
removeUserOption(data.user_id);
}

// Handle form submission (sending files)
if (data.type === 'file_offer') {
let agree = confirm(`User ${data.sender_id} is sending a file: ${data.file_name}. Do you want to download it?`);
Expand All @@ -51,7 +34,7 @@ form.addEventListener('submit', (e) => {

let fileInput = document.getElementById('fileInput');
let file = fileInput.files[0];
let targetUserId = document.getElementById('userSelect').value;
let targetUserId = document.getElementById('userInput').value;

let reader = new FileReader();
reader.onload = function (event) {
Expand All @@ -71,26 +54,6 @@ form.addEventListener('submit', (e) => {
form.reset();
});

function addUserOption(userId) {
let userSelect = document.getElementById('userSelect');
let option = document.createElement('option');
option.value = userId;
option.text = `User: ${userId}`;
userSelect.appendChild(option);
}

function removeUserOption(userId) {
let userSelect = document.getElementById('userSelect');
let options = userSelect.options;

for (let i = 0; i < options.length; i++) {
if (options[i].value === userId) {
userSelect.remove(i);
break;
}
}
}

function downloadFile(fileName, fileData) {
// Creates an invisible link, sets its href to the base64-encoded file data,
// and triggers a download with the specified filename. The browser automatically
Expand Down
8 changes: 3 additions & 5 deletions fileshare/templates/fileshare/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,10 @@ <h1 class="text-primary text-center mb-3">FileShare</h1>
</div>

<div class="mb-3">
<label for="userSelect" class="form-label">Send file to:</label>
<select id="userSelect" class="form-select" required>
<!-- User options will be populated here -->
</select>
<label for="userInput" class="form-label">Recipient's unique ID:</label>
<input type="text" id="userInput" class="form-control" name="user" required />
</div>
<button type="submit" class="btn btn-primary w-100">Send</button>
<button type="submit" class="btn btn-primary w-100">Send File</button>
</form>

<div class="file-info mt-3 fs-5">
Expand Down
15 changes: 1 addition & 14 deletions fileshare/tests/test_consumers.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,12 @@ async def test_connect(self):

async def test_disconnect(self):
"""
Test if the WebSocket disconnection is established correctly,
and check if the user is removed from the group.
Test if the WebSocket disconnection is established correctly.
"""
communicator = WebsocketCommunicator(
FileTransferConsumer.as_asgi(), "/ws/socket-server/"
)
await communicator.connect()

# Get the user ID first
await communicator.receive_json_from()

await communicator.disconnect()

async def test_file_transfer(self):
Expand All @@ -61,14 +56,6 @@ async def test_file_transfer(self):
receiver_response = await communicator_receiver.receive_json_from()
receiver_id = receiver_response["user_id"]

# Handle the "connected_users" message for the receiver
connected_users_event = await communicator_receiver.receive_json_from()
self.assertEqual(connected_users_event["type"], "connected_users")

# Handle the "user_connected" event (because sender connects)
user_connected_event = await communicator_receiver.receive_json_from()
self.assertEqual(user_connected_event["type"], "user_connected")

# Mock file transfer
file_name = "test_file.txt"
file_content = "Hello, World!" # The original file content
Expand Down

0 comments on commit 7aa7ee7

Please sign in to comment.