扩展补充

JSON¶

JSON.stringify(): 用于将 JavaScript 对象转换为 JSON 字符串。
可以传入一个函数用于对部分参数进行处理（可选）
js const jsonString = JSON.stringify(obj, (key, value) => { if (key === 'name') { return value.toUpperCase(); } return value; });
也可以传入一个数组，用于筛选特定的属性（key）
JSON.parse(): 用于将 JSON 字符串解析为 JavaScript 对象。

Websocket¶

WebSocket是一种在Web浏览器和服务器之间建立持久连接的通信协议。它允许服务器主动向客户端推送数据，而不需要客户端发起请求。
与HTTP请求不同，WebSocket在建立连接后保持打开状态，使得服务器可以随时向客户端发送数据，而不需要等待客户端发送请求。这种双向通信方式非常适合实时性要求高的应用场景，如实时聊天、在线游戏等。
较低的开销：与使用轮询或长轮询等技术相比，WebSocket减少了不必要的HTTP请求和响应头，从而降低了通信的开销。WebSocket连接的建立只需要一次握手，之后的通信数据帧较小，减少了网络传输的负担。
实时性和效率：WebSocket通信是基于事件驱动的，服务器可以实时将数据推送给客户端，避免了传统的轮询方式中的延迟。对于需要频繁更新的数据，使用WebSocket可以更高效地传输和处理。
创建var Socket = new WebSocket(url, [protocol] );
第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

API¶

Socket.readyState
0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

可以绑定处理函数
方法描述

Socket.send() 使用连接发送数据

Socket.close() 关闭连接
可以使用bind来进行绑定
封装示例

```js window["websocket"] = { _sock: {}, //当前的webSocket的对象 host: "ws://{server_ip}:10000/websocket/{roomId}/{playerId}",

connect: function (res) {
    if (this._sock.readyState !== 1) {
        this._sock = new WebSocket(this.host);
        this._sock.onopen = this._onOpen.bind(this);
        this._sock.onclose = this._onClose.bind(this);
        this._sock.onmessage = this._onMessage.bind(this);
        this._sock.onerror = this._onError.bind(this);
    }
    return this;
},
//绑定的触发函数
_onOpen: function (res) {
    console.log("连接成功！"+this.host);
},

_onClose: function (err) {
    window["onfire"].fire("onclose",err);
    console.log(this.host+"执行的是onClose函数!"+err);        
},

_onMessage: function (res) {
    var Data = JSON.parse(res.data);
    if (Data.action == 'error') {
        console.log(Data.msg);           
    }  else {
        window["onfire"].fire("onmessage", Data);
    }
},

_onError: function (err) {
    console.log(this.host+"执行的是onError函数"+err);
},

send: function (msg) {
    var _this = this;
    setTimeout(() => {
        if (_this._sock.readyState == 1) {
            _this._sock.send(JSON.stringify(msg));
        }
    }, 0)
}

}; ```

onfire¶

事件管理库，用于在JavaScript应用程序中实现事件的订阅和触发。它提供了一种简单的方式来实现组件之间的通信和数据传递。
onfire库提供了一种简单且灵活的方式来实现组件之间的通信和数据传递，促进了代码的可维护性和可扩展性。使用onfire可以使您的应用程序结构更清晰、代码更简洁，并提供更好的灵活性和可重用性。
安装npm i --save onfire.js

使用¶

import EE from 'onfire.js';

const ee = new EE();

ee.on('mouseover', () => {});

ee.once('click', () => {});

ee.fire('click', 1, 'hello', true);

ee.off('click');

API 文档¶

非常简单，类似于 event-emitter。

on(eventName: string, callback: Function)：监听一个事件，触发后，执行指定的方法。
once(eventName: string, callback: Function)：仅监听一个事件一次，，触发后，执行指定的方法。
fire(eventName: string, ...parameters: any[])：触发一个指定的事件，并发送对应的数据。
off(eventName?: string, callback?: Function)：取消监听一个事件及方法，如果 callback 为空，则取消事件的所有方法；如果都为空，则取消所有事件监听。

window¶

window是一个在浏览器环境中通用的全局对象，可在各种网页开发框架和技术中使用，包括Cocos Creator、Vue.js以及其他常见的前端开发框架。
在浏览器中，window对象是一个顶级全局对象，代表整个浏览器窗口的全局环境。它提供了许多内置的属性和方法，例如document、location和XMLHttpRequest等。此外，您也可以在window对象上定义自己的全局变量和函数(来实现全局共享)。
创建和访问window["name"]=val

API¶

- `window.location.href`获取url¶

数据存储与获取¶

从url中获取信息¶

```js // 假设 URL 为 https://example.com/?name=John&age=25

// 创建 URL 对象 const url = new URL(window.location.href);

// 获取参数对象 const params = new URLSearchParams(url.search);

// 获取单个参数的值 const name = params.get('name'); // "John" const age = params.get('age'); // "25"

```

从浏览器缓存获取信息¶

```js // 存储数据到 localStorage localStorage.setItem('key', 'value');

// 从 localStorage 中读取数据 const data = localStorage.getItem('key'); console.log(data); // 输出：value

// 删除 localStorage 中的数据 localStorage.removeItem('key');

// 清空所有的 localStorage 数据 localStorage.clear(); ```

以字符串的形式存储，因此如果要存储复杂数据类型，要先转化为JSON

跨域资源共享（CORS）¶

关键：阻止网页向除了源服务器（提供前端页面内容的服务器）外的其他地址发送请求（http）
跨域资源共享（Cross-Origin Resource Sharing，简称 CORS）是一种浏览器安全机制，用于控制跨域请求的访问权限。在默认情况下，浏览器会限制通过 JavaScript 发起的跨域请求，以防止恶意网站进行跨站攻击。
当浏览器在执行跨域请求时，它会发送一个预检请求（Preflight Request）到目标服务器，以确认该请求是否允许跨域访问。预检请求使用 HTTP OPTIONS 方法，并携带一些额外的头部信息。
服务器收到预检请求后，会根据请求中的信息进行判断，并返回一组 CORS 响应头来指示是否允许跨域访问。
因此这会给前端开发时进行与后端对接中造成麻烦（前端页面来自于本地的虚拟服务器，这与远程后端是不同的，会造成跨域访问呢）

解决方式¶

反向代理：可以在前端部署一个反向代理服务器，将前端请求转发到后端服务器上。这样，从前端的角度看，它只与同源的代理服务器通信，而代理服务器与后端服务器之间的通信则不存在跨域问题。
使用nginx配置反向代理

配置反向代理：在 nginx.conf 文件中，找到 http 块，并在其中添加以下配置示例：

confCopy codehttp {
    server {
        listen       80;
        server_name  localhost;

        location /api {
            proxy_pass         http://backend_server;
            proxy_set_header   Host $host;//可选
            proxy_set_header   X-Real-IP $remote_addr;//可选
        }
    }
}

上述配置示例中，将所有以 /api 开头的请求转发实际的后端服务器地址。

启动 Nginx：保存 nginx.conf 文件后，进入 Nginx 的安装目录，双击运行 nginx.exe，启动 Nginx 服务器。

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

扩展补充

JSON¶

Websocket¶

API¶

onfire¶

使用¶

API 文档¶

window¶

API¶

- window.location.href获取url¶

数据存储与获取¶

从url中获取信息¶

从浏览器缓存获取信息¶

跨域资源共享（CORS）¶

解决方式¶

- `window.location.href`获取url¶