I’m working on a project where a C-based WebSocket server needs to communicate with a JavaScript client to change the color of an SVG element. The server should send messages to the JavaScript client when it receives commands from wscat. However, I’m facing an issue where the server echoes the messages back to wscat instead of the JavaScript client.
When I open index.html in a browser, I see the message “WebSocket is open now” in the console, indicating that the WebSocket connection is established. But when I send a command from wscat to the WebSocket server, the server only echoes the message back to wscat and not to the HTML page.
server.c
<code>#include <libwebsockets.h>
#include <string.h>
#include <stdio.h>
static int callback_ws(struct lws *wsi, enum lws_callback_reasons reason,
void *user, void *in, size_t len) {
switch (reason) {
case LWS_CALLBACK_ESTABLISHED:
printf("Connection establishedn");
break;
case LWS_CALLBACK_RECEIVE:
printf("%dn", (int)len);
char buffer[1024];
if (len < sizeof(buffer) - 1) {
memcpy(buffer, in, len);
buffer[len] = ''; // Add null terminator at the end
printf("Message received: %sn", buffer);
// Echo the message back to the client
unsigned char message[LWS_SEND_BUFFER_PRE_PADDING + len + LWS_SEND_BUFFER_POST_PADDING];
memcpy(&message[LWS_SEND_BUFFER_PRE_PADDING], buffer, len);
lws_write(wsi, &message[LWS_SEND_BUFFER_PRE_PADDING], len, LWS_WRITE_TEXT);
}
break;
default:
printf("Unhandled callback reason: %dn", reason);
break;
}
return 0;
}
static struct lws_protocols protocols[] = {
{ "ws", callback_ws, 0, 1024 },
{ NULL, NULL, 0, 0 } // Terminator
};
int main(void) {
struct lws_context_creation_info info;
memset(&info, 0, sizeof info);
info.port = 8080;
info.protocols = protocols;
struct lws_context *context = lws_create_context(&info);
if (context == NULL) {
fprintf(stderr, "lws init failedn");
return -1;
}
printf("Starting server...n");
while (1) {
lws_service(context, 1000); // 1000 ms = 1 second
}
lws_context_destroy(context);
return 0;
}
</code>
<code>#include <libwebsockets.h>
#include <string.h>
#include <stdio.h>
static int callback_ws(struct lws *wsi, enum lws_callback_reasons reason,
void *user, void *in, size_t len) {
switch (reason) {
case LWS_CALLBACK_ESTABLISHED:
printf("Connection establishedn");
break;
case LWS_CALLBACK_RECEIVE:
printf("%dn", (int)len);
char buffer[1024];
if (len < sizeof(buffer) - 1) {
memcpy(buffer, in, len);
buffer[len] = ''; // Add null terminator at the end
printf("Message received: %sn", buffer);
// Echo the message back to the client
unsigned char message[LWS_SEND_BUFFER_PRE_PADDING + len + LWS_SEND_BUFFER_POST_PADDING];
memcpy(&message[LWS_SEND_BUFFER_PRE_PADDING], buffer, len);
lws_write(wsi, &message[LWS_SEND_BUFFER_PRE_PADDING], len, LWS_WRITE_TEXT);
}
break;
default:
printf("Unhandled callback reason: %dn", reason);
break;
}
return 0;
}
static struct lws_protocols protocols[] = {
{ "ws", callback_ws, 0, 1024 },
{ NULL, NULL, 0, 0 } // Terminator
};
int main(void) {
struct lws_context_creation_info info;
memset(&info, 0, sizeof info);
info.port = 8080;
info.protocols = protocols;
struct lws_context *context = lws_create_context(&info);
if (context == NULL) {
fprintf(stderr, "lws init failedn");
return -1;
}
printf("Starting server...n");
while (1) {
lws_service(context, 1000); // 1000 ms = 1 second
}
lws_context_destroy(context);
return 0;
}
</code>
#include <libwebsockets.h>
#include <string.h>
#include <stdio.h>
static int callback_ws(struct lws *wsi, enum lws_callback_reasons reason,
void *user, void *in, size_t len) {
switch (reason) {
case LWS_CALLBACK_ESTABLISHED:
printf("Connection establishedn");
break;
case LWS_CALLBACK_RECEIVE:
printf("%dn", (int)len);
char buffer[1024];
if (len < sizeof(buffer) - 1) {
memcpy(buffer, in, len);
buffer[len] = ''; // Add null terminator at the end
printf("Message received: %sn", buffer);
// Echo the message back to the client
unsigned char message[LWS_SEND_BUFFER_PRE_PADDING + len + LWS_SEND_BUFFER_POST_PADDING];
memcpy(&message[LWS_SEND_BUFFER_PRE_PADDING], buffer, len);
lws_write(wsi, &message[LWS_SEND_BUFFER_PRE_PADDING], len, LWS_WRITE_TEXT);
}
break;
default:
printf("Unhandled callback reason: %dn", reason);
break;
}
return 0;
}
static struct lws_protocols protocols[] = {
{ "ws", callback_ws, 0, 1024 },
{ NULL, NULL, 0, 0 } // Terminator
};
int main(void) {
struct lws_context_creation_info info;
memset(&info, 0, sizeof info);
info.port = 8080;
info.protocols = protocols;
struct lws_context *context = lws_create_context(&info);
if (context == NULL) {
fprintf(stderr, "lws init failedn");
return -1;
}
printf("Starting server...n");
while (1) {
lws_service(context, 1000); // 1000 ms = 1 second
}
lws_context_destroy(context);
return 0;
}
index.html
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket SVG Circle Color Change</title>
<style>
#mySVG {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle id="myCircle" cx="50" cy="50" r="20" fill="blue" />
</svg>
<p>Received message: <span id="messageDisplay"></span></p>
<script>
const socket = new WebSocket("ws://localhost:8080");
socket.onopen = function(event) {
console.log("WebSocket is open now.");
};
socket.onmessage = function(event) {
console.log("WebSocket message received:", event.data);
const messageDisplay = document.getElementById("messageDisplay");
messageDisplay.textContent = event.data;
const circle = document.getElementById("myCircle");
// Assuming the message received is a color name or hex code
circle.setAttribute("fill", event.data);
};
socket.onclose = function(event) {
console.log("WebSocket is closed now.");
};
socket.onerror = function(error) {
console.error("WebSocket error observed:", error);
};
</script>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket SVG Circle Color Change</title>
<style>
#mySVG {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle id="myCircle" cx="50" cy="50" r="20" fill="blue" />
</svg>
<p>Received message: <span id="messageDisplay"></span></p>
<script>
const socket = new WebSocket("ws://localhost:8080");
socket.onopen = function(event) {
console.log("WebSocket is open now.");
};
socket.onmessage = function(event) {
console.log("WebSocket message received:", event.data);
const messageDisplay = document.getElementById("messageDisplay");
messageDisplay.textContent = event.data;
const circle = document.getElementById("myCircle");
// Assuming the message received is a color name or hex code
circle.setAttribute("fill", event.data);
};
socket.onclose = function(event) {
console.log("WebSocket is closed now.");
};
socket.onerror = function(error) {
console.error("WebSocket error observed:", error);
};
</script>
</body>
</html>
</code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket SVG Circle Color Change</title>
<style>
#mySVG {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle id="myCircle" cx="50" cy="50" r="20" fill="blue" />
</svg>
<p>Received message: <span id="messageDisplay"></span></p>
<script>
const socket = new WebSocket("ws://localhost:8080");
socket.onopen = function(event) {
console.log("WebSocket is open now.");
};
socket.onmessage = function(event) {
console.log("WebSocket message received:", event.data);
const messageDisplay = document.getElementById("messageDisplay");
messageDisplay.textContent = event.data;
const circle = document.getElementById("myCircle");
// Assuming the message received is a color name or hex code
circle.setAttribute("fill", event.data);
};
socket.onclose = function(event) {
console.log("WebSocket is closed now.");
};
socket.onerror = function(error) {
console.error("WebSocket error observed:", error);
};
</script>
</body>
</html>
I’ve ensured that the WebSocket server runs on ws://localhost:8080 and the JavaScript client connects to the same address. The server successfully receives messages and prints them, but it only echoes them back to wscat.
How can I ensure that the messages are sent to the JavaScript client as well? What am I missing in the setup or implementation?