功能描述:开发一个简单的基于http通信的web服务器,提供以下通信功能 1.通过浏览器可以显示出一个页面(html界面) 2.界面上有3个按键,分别为文本按键,图片按键,视频按键 3.点击文本按键,获取显示一个文件里面的字符串信息 4.点击图片按键,获取显示一张图片并显示 5.点击视频按键,获取显示一个视频并播放 。用C语言和html语言实现,写出具体服务器和客户端代码。
时间: 2024-02-20 15:56:05 浏览: 62
好的,以下是用C语言实现的服务器和HTML的客户端代码:
服务器代码:
```c
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <sys/socket.h>
#include <arpa/inet.h>
#include <unistd.h>
#include <fcntl.h>
#define PORT 8080
int main(int argc, char const *argv[]) {
int server_fd, new_socket, valread;
struct sockaddr_in address;
int addrlen = sizeof(address);
char buffer[1024] = {0};
char *html = "<html><head><title>Web Server</title></head><body><h1>Web Server</h1><form action=\"/text\"><input type=\"submit\" value=\"Get Text\"></form><br><form action=\"/image\"><input type=\"submit\" value=\"Get Image\"></form><br><form action=\"/video\"><input type=\"submit\" value=\"Get Video\"></form></body></html>";
if ((server_fd = socket(AF_INET, SOCK_STREAM, 0)) == 0) {
perror("socket failed");
exit(EXIT_FAILURE);
}
address.sin_family = AF_INET;
address.sin_addr.s_addr = INADDR_ANY;
address.sin_port = htons(PORT);
if (bind(server_fd, (struct sockaddr *)&address, sizeof(address)) < 0) {
perror("bind failed");
exit(EXIT_FAILURE);
}
if (listen(server_fd, 3) < 0) {
perror("listen failed");
exit(EXIT_FAILURE);
}
while (1) {
if ((new_socket = accept(server_fd, (struct sockaddr *)&address, (socklen_t*)&addrlen)) < 0) {
perror("accept failed");
exit(EXIT_FAILURE);
}
valread = read(new_socket, buffer, sizeof(buffer));
if (valread > 0) {
char *path = strtok(buffer, " ");
path = strtok(NULL, " ");
int fd;
char response_header[1024];
char response_body[1024];
char *content_type;
if (strcmp(path, "/") == 0) {
content_type = "text/html";
sprintf(response_body, "%s", html);
} else if (strcmp(path, "/text") == 0) {
content_type = "text/plain";
fd = open("text.txt", O_RDONLY);
read(fd, response_body, sizeof(response_body));
close(fd);
} else if (strcmp(path, "/image") == 0) {
content_type = "image/png";
fd = open("image.png", O_RDONLY);
read(fd, response_body, sizeof(response_body));
close(fd);
} else if (strcmp(path, "/video") == 0) {
content_type = "video/mp4";
fd = open("video.mp4", O_RDONLY);
read(fd, response_body, sizeof(response_body));
close(fd);
}
sprintf(response_header, "HTTP/1.1 200 OK\nContent-Type: %s\nContent-Length: %ld\n\n", content_type, strlen(response_body));
send(new_socket, response_header, strlen(response_header), 0);
send(new_socket, response_body, strlen(response_body), 0);
}
close(new_socket);
}
return 0;
}
```
客户端HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Web Client</title>
</head>
<body>
<h1>Web Client</h1>
<form action="/text" method="GET">
<input type="submit" value="Get Text">
</form>
<br>
<form action="/image" method="GET">
<input type="submit" value="Get Image">
</form>
<br>
<form action="/video" method="GET">
<input type="submit" value="Get Video">
</form>
<br>
<div id="text"></div>
<br>
<img id="image" src="">
<br>
<video id="video" width="320" height="240" controls>
<source src="" type="video/mp4">
</video>
<script>
const textButton = document.querySelector('input[value="Get Text"]');
const imageButton = document.querySelector('input[value="Get Image"]');
const videoButton = document.querySelector('input[value="Get Video"]');
const textDiv = document.getElementById('text');
const imageImg = document.getElementById('image');
const videoVideo = document.getElementById('video');
textButton.addEventListener('click', () => {
fetch('/text')
.then(response => response.text())
.then(text => {
textDiv.textContent = text;
});
});
imageButton.addEventListener('click', () => {
imageImg.src = '/image';
});
videoButton.addEventListener('click', () => {
videoVideo.src = '/video';
});
</script>
</body>
</html>
```
这个代码实现了服务器和客户端之间的基本通信,但是还需要调整和完善。
阅读全文