npm install # 安装依赖
node app.js # 运行后台1.关于中间件
- 中间件总的来说就是一个函数，对于koa、express这些框架来说都是这样，它会把(ctx,next)【koa中】、(req,resp,next)【express中】传入给中间件，从而对其进行操作，就可以实现对请求访问和成功返回数据的过程中进行一些处理
- next作用是一样，中间件内部调用后，会执行下一个中间件；而koa是
async+await实现“洋葱模型”、express是“顺序执行”的
2.关于异步
- 对于一个异步函数来说，要想拿到它的值，可以通过
回调函数、promise、async + await这些方式来解决。 - 异步操作有
定时器、事件绑定、ajax、读写文件等等// 回调函数获取值 function getData(){ let res = 1 setTimeout(() => { res = 2 // 模拟异步结果 }, 10) return res } const res = getData() console.log(res) // 1，说明这种是拿不到值的 function getData(callback){ let res = 1 setTimeout(() =>{ res = 2 callback(res) },10) } getData((res) => { console.log(res); // 2 })
npm install # 安装依赖
npm run serve # 调试开发
npm run build # 生产部署// 服务端接收数据格式
{
action: "getData",
socketType: "trendData",
chartName: "trend",
value: ""
}
/*
解释：
action：代表某项行为，可选值有getData、fullScreen、themeChange；比如张三的电脑想要服务端数据，那么action就为getData；比如张三的某个图表发生全屏，那么就要发送给服务端，便于让李四对应图表也为全屏
socketType：标识前端动作类型，比如前端要获取数据，服务单返回，前端就通过这个类型来判断该如何处理，可选值有trendData、sellerData、mapData、rankData、hotData、stockData、fullScreen、themeChange
chartName：图表名称，服务端根据这个来获取对应图表数据，可选值有trend、seller、map、rank、hot、stock，如果是主题切换，可不传此值
value：就是fullScreen时，告诉其他浏览器是否要全屏；当张三电脑themeChange，服务器就要告诉李四themeChange哪一个具体的主题
*/
// 服务端发送数据格式
// 当action为getData
{
action: "getData",
socketType: "trendData",
chartName: "trend",
value: "",
data: "读取到的trend文件的数据"
}
// 当action不为getData
{
action: "fullScreen",
socketType: "fullScreen",
chartName: "trend",
value: ""
}
// fullScreenStatus
fullScreenStatus:{
trend: false,
seller: false,
map: false,
rank: false,
hot: false,
stock: false
}- echarts注册主题
- echarts可以多次设置option，效果会累加而不是替换
- WebSocket对比ajax，它更适合后端实时数据交互，而不是用户在前端主动发起请求来调用后端数据
// hello world 案例
// 客户端
var connectBtn = document.querySelector('#connect') // 测试连接按钮
var sendBtn = document.querySelector('#send') // 向服务端发送数据按钮
var msgP = document.querySelector('#msg') // 显示接收的消息 p
let client = null
connectBtn.onclick = function () {
client = new window.WebSocket('ws://localhost:9998')
client.onopen = function(){ // 客户端与服务端连接成功
console.log('连接服务端成功');
sendBtn.disabled = false;
}
client.onclose = function(){ // 客户端与服务端连接失败
console.log('连接服务端失败');
sendBtn.disabled = true;
}
client.onmessage = function({ data:msg }){ // 客户端监听到服务端发送的消息
msgP.innerHTML = msg;
}
}
sendBtn.onclick = function () {
client.send(JSON.stringify({ // 客户端向服务端发送消息
action: 'fullScreen',
socketType: 'fullScreen',
chartName: '',
value: 'true'
}))
}
// 服务端 npm install ws
const ws = new WebSocket.Server({ port: 9998 }, () => {
console.log('websocket is listening port: 9998');
})
// 对客户端连接事件进行监听，client是客户端的socket连接对象
ws.on('connection', (server) => {
console.log('client connected successfully, total client:' + ws.clients.size);
server.on('message', async (msg) => { // 服务端监听到客户端发来的消息
console.log(msg)
server.send(JSON.stringify(payload)) // 服务端向客户端发送消息，且是二进制或字符串数据
ws.clients.forEach(item => { // 可以向所有已经连接的客户端发送数据
item.send(msg)
})
})- 单例模式
class Jquery {
instance = null
static getInstance(){
if (!this.instance) {
return new Jquery()
} else {
return this.instance
}
}
}- 全屏切换的思路
/*
主页->全屏：在主页点击全屏按钮时，利用socket发送请求，再分发给所有客户端，然后注册的回调函数直接改变对应的路由就可以了
全屏->主页：点击缩小按钮时，就把消息转发给所有客户端，注册的回调函数执行让路由变成'/'，因为所有图表都是这个逻辑，所以抽取在mixin里
*/