<!
DOCTYPE html>
<html>
<head>
<title>Simple Bluetooth Chat</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
#messages {
height: 300px;
border: 1px solid #ccc;
padding: 10px;
overflow-y: scroll;
margin-bottom: 10px;
}
#messageInput {
width: 70%;
padding: 8px;
}
button {
padding: 8px 15px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:disabled {
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Simple Bluetooth Chat</h1>
<div id="messages"></div>
<input type="text" id="messageInput" placeholder="Type your message">
<button id="sendButton" disabled>Send</button>
<button id="connectButton">Connect to Device</button>
<button id="advertiseButton">Advertise as Server</button>
<script>
const messagesDiv = [Link]('messages');
const messageInput = [Link]('messageInput');
const sendButton = [Link]('sendButton');
const connectButton = [Link]('connectButton');
const advertiseButton = [Link]('advertiseButton');
let serverCharacteristic;
let clientCharacteristic;
const SERVICE_UUID = '00001101-0000-1000-8000-00805F9B34FB'; // Standard Serial Port
Profile
const CHARACTERISTIC_UUID = '00001102-0000-1000-8000-00805F9B34FB';
// Add a message to the chat window
function addMessage(message, isLocal = false) {
const messageElement = [Link]('div');
[Link] = message;
[Link] = isLocal ? 'blue' : 'green';
[Link](messageElement);
[Link] = [Link];
}
// Advertise as a Bluetooth server (for the receiver)
[Link]('click', async () => {
try {
addMessage("Advertising as server...");
const server = await [Link]({
filters: [{ services: [SERVICE_UUID] }]
});
[Link]('characteristicvaluechanged', event => {
const value = [Link];
const message = new TextDecoder().decode(value);
addMessage(`Friend: ${message}`);
});
const service = await [Link](SERVICE_UUID);
const characteristic = await [Link](CHARACTERISTIC_UUID, {
properties: ['read', 'write', 'notify'],
permissions: ['readable', 'writable']
});
serverCharacteristic = characteristic;
[Link] = false;
addMessage("Ready to receive messages!");
} catch (error) {
addMessage(`Error: ${error}`);
}
});
// Connect to another device (for the sender)
[Link]('click', async () => {
try {
addMessage("Connecting to device...");
const device = await [Link]({
filters: [{ services: [SERVICE_UUID] }]
});
const server = await [Link]();
const service = await [Link](SERVICE_UUID);
clientCharacteristic = await [Link](CHARACTERISTIC_UUID);
await [Link]();
[Link]('characteristicvaluechanged', event => {
const value = [Link];
const message = new TextDecoder().decode(value);
addMessage(`Friend: ${message}`);
});
[Link] = false;
addMessage("Connected! Ready to send messages.");
} catch (error) {
addMessage(`Error: ${error}`);
}
});
// Send a message
[Link]('click', async () => {
const message = [Link];
if (!message) return;
try {
const data = new TextEncoder().encode(message);
if (serverCharacteristic) {
// We're the server, write to our own characteristic
await [Link](data);
} else if (clientCharacteristic) {
// We're the client, write to the server's characteristic
await [Link](data);
}
addMessage(`You: ${message}`, true);
[Link] = '';
} catch (error) {
addMessage(`Error sending: ${error}`);
}
});
// Also send when pressing Enter
[Link]('keypress', (e) => {
if ([Link] === 'Enter') {
[Link]();
}
});
addMessage("1. One person clicks 'Advertise as Server'");
addMessage("2. The other clicks 'Connect to Device' and selects the first device");
addMessage("3. Start chatting!");
</script>
</body>
</html>
