最近在学习 JavaScript，突然想到在上一家公司时跟前端同事调试 web 功能，然后就想着自己手动也搭一个 Http 的服务，这个服务是跑在一个 arm 设备上的，然后呢在局域网内在浏览器通过输入如 192.168.2.100:8000 这样来访问设备，如登录、获取配置、设置配置等等。因为是首次接触前端开发，也不知道怎么开始，然后就是简单地写了一个 html 文件，文件里引用了 js 代码，然后就在本地执行，首先遇到就是跨域问题，如：
直接在本地执行是不对的，肯定会出现跨域问题，真是第一次搞这个前端开发，啥也不懂啊，网上搜索了一番，需要从服务器返回一个 html 的文件，然后浏览器解析后再进行操作的。于是把这个index.html 文件拷贝到 arm 上，修改后如下：
通过ip地址确实可以访问到了arm设备，默认返回的就是 index.html 的内容（这个是默认行为吗？不懂），然而新问题双出现了，如下：
loginbtn 没有定义，这个是一个函数，是我定义在js文件的函数，这个函数绑定到了 “登录” 按钮的 onclick 事件上，我的目的就是点击 “登录” 的时候，向服务器 POST 操作。很明显这里找不到这个函数定义。 以下是 index.html 的内容：
而 login.js 内容却是这样的：
{
所以导致 login.js 就成了这个，以至于那个函数没有定义。
所以还是服务端程序的问题。最新的 mongoose github 上的代码（版本是 "7.8"）已经有例子，但它那个 js 代码对我这个初学者来说太难看懂了，我这个源码还是老版本的（版本是 "6.18"）。错误的服务器代码响应是这样的：
浏览器来请求 login.js 的时候，服务器却应答了 “data”:"test" 的内容。我修改了服务端程序，简单到这样：
#include
#include
#include
#include
#include
#include
#include
#include "../webServer/mongoose.h"
#include "json/json.h"
#include "../webServer/webServer.h"
#include "comm/log.h"void eventHandler(struct mg_connection *nc, int event, void *eventData);
void handleRequest(struct mg_connection *connection, int32_t event, void *data);
void* addConnection(struct mg_connection *nc);
void delConnection(void *usrData);const char *sgWorkPath = "/web";struct userData
{int index;
};struct FileInfo
{FILE *fp;char fileName[32];char filePath[32];size_t size;
};std::map g_headerMap;
std::map g_connectionMap; //连接映射表，当多线程时，用于找到对应连接进行应答
std::string g_protocol; //协议，如http /1.1
std::string g_stateStr; //状态描述，用于返回应答int g_status = 200; //应答状态
int g_connectId = 0; //连接id的分配std::mutex g_mutex;//用postman 测试，linux需要关闭防火墙，否则收不到数据
int main(int argc, char *argv[])
{ if(argc < 2){errorf("Usage: %s port\n", argv[0]);return 1;}int port = atoi(argv[1]);struct userData uData{100};struct mg_mgr mgr;//mgr里的user_data指针将会指向第二个参数，当有连接过来时//mg_connection中的mgr中的user_data指向的就是第二个参数mg_mgr_init(&mgr, &uData);char buf[32] = {0};snprintf(buf, sizeof(buf), "%d", port);struct mg_connection *con = mg_bind(&mgr, buf, eventHandler);if(con == NULL) {errorf("mg_bind fail\n");return -1;}mg_set_protocol_http_websocket(con);uData.index = 200;infof("listen ip[%s], port[%d]....\n", inet_ntoa(con->sa.sin.sin_addr), port);while (1){mg_mgr_poll(&mgr, 100);}mg_mgr_free(&mgr);return 0;
}void eventHandler(struct mg_connection *nc, int event, void *eventData)
{switch (event){case MG_EV_ACCEPT:// tracef("a new accept!!\n");// nc->user_data = addConnection(nc); //delConnection时用uc进行connctionID的传递break;case MG_EV_HTTP_REQUEST:// tracef("a new http request!!\n"); handleRequest(nc, event, eventData);break;case MG_EV_CLOSE:// tracef("request close!!\n");delConnection(nc->user_data);nc->user_data = nullptr;break;default:break;}
}// 添加一个连接
void* addConnection(struct mg_connection *nc)
{userData *data = new userData; //此内存在delConnection时进行释放std::lock_guard lockGuard(g_mutex);g_connectId += 1;data->index = g_connectId;g_connectionMap.insert(std::pair(g_connectId, nc));return data;
}// 删除一个连接
void delConnection(void *usrData)
{userData *data = (userData*)usrData;if(data == NULL){return;}if(g_connectionMap.find(data->index) != g_connectionMap.end()){tracef("delete connection id: %d\n", data->index);g_connectionMap.erase(data->index);}delete data; //释放addConnection时申请的内存
}void setServerPath(struct mg_connection *connection, struct http_message* msg, const char *path)
{warnf("set server path: %s\n", path);struct mg_serve_http_opts opts;memset(&opts, 0, sizeof(opts));opts.enable_directory_listing = "yes";opts.document_root = path;mg_serve_http(connection, msg, opts);
}void handleRequest(struct mg_connection *connection, int32_t event, void *data)
{struct http_message* msg = (struct http_message*)data;//请求正文std::string body(msg->body.p, msg->body.len);if(body.length() > 0){tracef("body size: %u, %s\n", body.length(), body.c_str());}//请求的地址，不包括ip地址和端口号std::string uri(msg->uri.p, msg->uri.len);//请求的方法，GET、POST、PUT等std::string method(msg->method.p, msg->method.len);tracef("connect from ip: %s, method = %s, uri = %s\n", inet_ntoa(connection->sa.sin.sin_addr), method.c_str(), uri.c_str()); //设置资源根目录if(uri == "/api/user/login/"){}else {setServerPath(connection, msg, sgWorkPath);return;}
}
最后 login.js 加载成功了
这样才能接着往下添加新的功能了。
这个内容是我的 http 服务器里应答的内容，奇怪这个怎么会这样？这个服务器程序是基于 mongoose 开源代码开发。一开始以为是 html 里指定的 js 加载路径写错了，网上搜索了好多基本上都是说路径写错导致无法加载到 js 代码，但其实不是，同时搜索到，js 文件是根据在 html 中的位置顺序加载的，也就是说浏览器也会去请求 js 文件，如上 ，所以浏览器是最后会去请求这个 login.js 文件，而我在 http 服务程序中回复了上面这个内容：
