14 changed files with 2607 additions and 442 deletions
Binary file not shown.
File diff suppressed because it is too large
@ -1,205 +1,217 @@ |
|||
/*********************************************/ |
|||
|
|||
// 次文件只需要关注 getBars 和 subscribeBars 函数即可
|
|||
|
|||
/******************************************/ |
|||
|
|||
|
|||
import { |
|||
socket |
|||
} from './websocket.js' |
|||
|
|||
import { |
|||
Event |
|||
} from './event.js' |
|||
|
|||
|
|||
// 历史数据 第一条数据的 时间撮 因为k线图一次性历史数据只拿一部分，用户吧图往前滑动，就会用这个时间撮去请求更早的 历史数据
|
|||
var detafeed_historyTime = 0 |
|||
// 上一次的 K线周期 切换产品的时候 需要从websock 取消订阅这个
|
|||
var detafeed_lastResolution = null |
|||
// 上一次的产品 切换产品的时候 需要从websock 取消订阅这个
|
|||
var detafeed_lastSymbol = null |
|||
|
|||
|
|||
function FeedBase() {} |
|||
|
|||
FeedBase.prototype.onReady = function(callback) { |
|||
callback(this._configuration) |
|||
} |
|||
|
|||
FeedBase.prototype.getSendSymbolName = function(symbolName) { |
|||
var name = symbolName.split('/') |
|||
return (name[0] + name[1]).toLocaleLowerCase() |
|||
} |
|||
|
|||
FeedBase.prototype.resolveSymbol = function(symbolName, onResolve, onError) { |
|||
onResolve({ |
|||
"name": symbolName, |
|||
"timezone": "Asia/Shanghai", |
|||
"pricescale": 10000000000000000, |
|||
"minmov": 1, |
|||
"minmov2": 0, |
|||
"ticker": symbolName, |
|||
"description": "", |
|||
"session": "24x7", |
|||
"type": "bitcoin", |
|||
"volume_precision": 10, |
|||
"has_intraday": true, |
|||
"intraday_multipliers": ['1', '5', '15', '30', '60', '240', '1440'], // 时间
|
|||
"has_weekly_and_monthly": false, |
|||
"has_no_volume": false, |
|||
/*********************************************/ |
|||
|
|||
// 次文件只需要关注 getBars 和 subscribeBars 函数即可
|
|||
|
|||
/******************************************/ |
|||
|
|||
|
|||
import { |
|||
socket |
|||
} from './websocket.js' |
|||
|
|||
import { |
|||
Event |
|||
} from './event.js' |
|||
|
|||
|
|||
// 历史数据 第一条数据的 时间撮 因为k线图一次性历史数据只拿一部分，用户吧图往前滑动，就会用这个时间撮去请求更早的 历史数据
|
|||
var detafeed_historyTime = null |
|||
// 上一次的 K线周期 切换产品的时候 需要从websock 取消订阅这个
|
|||
var detafeed_lastResolution = null |
|||
// 上一次的产品 切换产品的时候 需要从websock 取消订阅这个
|
|||
var detafeed_lastSymbol = null |
|||
|
|||
|
|||
function FeedBase() {} |
|||
|
|||
FeedBase.prototype.onReady = function(callback) { |
|||
callback(this._configuration) |
|||
} |
|||
|
|||
FeedBase.prototype.getSendSymbolName = function(symbolName) { |
|||
var name = symbolName.split('/') |
|||
return (name[0] + name[1]).toLocaleLowerCase() |
|||
} |
|||
|
|||
FeedBase.prototype.resolveSymbol = function(symbolName, onResolve, onError) { |
|||
onResolve({ |
|||
"name": symbolName, |
|||
"timezone": "Asia/Shanghai", |
|||
"pricescale": 10000000000000000, |
|||
"minmov": 1, |
|||
"minmov2": 0, |
|||
"ticker": symbolName, |
|||
"description": "", |
|||
"session": "24x7", |
|||
"type": "bitcoin", |
|||
"volume_precision": 10, |
|||
"has_intraday": true, |
|||
"seconds_multipliers":['1', '5', '15', '30', '60', '1D', '1W','1M'], |
|||
"intraday_multipliers": ['1', '5', '15', '30', '60', '1D', '1W','1M'], |
|||
"has_seconds":true, |
|||
"supports_marks": true, |
|||
"supports_timescale_marks": true, |
|||
"supported_time": true, |
|||
"has_weekly_and_monthly": true, |
|||
"has_no_volume": true, |
|||
"regular_session": "24x7", |
|||
|
|||
}) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 更多时间类型在这里添加 时间类型请看火币文档 |
|||
* @param resolution 订阅周期 按照自己喜欢的来 如 30 30分钟、 1D 一天 |
|||
* @param name 交易对symbol |
|||
* @param to 结束时间 |
|||
* @returns {object} |
|||
*/ |
|||
const resolutionFormat = (resolution, name, to) => { |
|||
let req = `market.${name}.kline.${resolution}min`; |
|||
let minutes = resolution; |
|||
|
|||
if (resolution.includes('D')) { |
|||
if (resolution.length < 2) resolution = '1' + resolution; |
|||
req = `market.${name}.kline.${parseInt(resolution)}day`; |
|||
minutes = parseInt(resolution) * 24 * 60; |
|||
} else if (resolution.includes('W')) { |
|||
if (resolution.length < 2) resolution = '1' + resolution; |
|||
req = `market.${name}.kline.${parseInt(resolution)}week`; |
|||
minutes = parseInt(resolution) * 24 * 60 * 7; |
|||
} else if (resolution.includes('M')) { |
|||
if (resolution.length < 2) resolution = '1' + resolution; |
|||
req = `market.${name}.kline.${parseInt(resolution)}mon`; |
|||
minutes = parseInt(resolution) * 24 * 60 * 30; |
|||
} else { |
|||
if (resolution / 60 > 1) { |
|||
req = `market.${name}.kline.${resolution / 60}hour`; |
|||
} |
|||
} |
|||
|
|||
let from = null; |
|||
if (to) { |
|||
from = to - 50 * minutes * 60; |
|||
if (resolution.includes('M') || resolution.includes('W')) { // 周线月线控制条数，时间超出火币规定范围, ws报错
|
|||
from = to - 50 * minutes * 60; |
|||
} |
|||
} |
|||
return { |
|||
minutes, |
|||
req, |
|||
from, |
|||
to, |
|||
}; |
|||
}; |
|||
|
|||
FeedBase.prototype.getBars = function(symbolInfo, resolution, periodParams, onHistoryCallback, onErrorCallback) { |
|||
console.log("获取历史数据") |
|||
// 切换产品周期 或者 切换产品 会执行这个函数
|
|||
let reso = resolutionFormat(resolution, symbolInfo.name, periodParams.to > detafeed_historyTime ? periodParams |
|||
.to : |
|||
detafeed_historyTime) |
|||
// 是历史数据
|
|||
var history = true |
|||
/* |
|||
!detafeed_historyTime 如果没请请求过这个产品或者这个周期的历史数据 |
|||
resolution !== detafeed_lastResolution 是否更换了产品周期 |
|||
detafeed_lastSymbol !== symbolInfo.name 是否切换了产品 |
|||
*/ |
|||
if (!detafeed_historyTime || (resolution !== detafeed_lastResolution) || detafeed_lastSymbol !== symbolInfo |
|||
.name) { |
|||
// 那就不是历史数据
|
|||
history = false |
|||
// 储存请求过的产品
|
|||
detafeed_lastSymbol = symbolInfo.name |
|||
// 记录目前时间戳，就用目前时间戳往前请求历史数据
|
|||
detafeed_historyTime = window.parseInt((Date.now() / 1000)) |
|||
} |
|||
/* |
|||
@socket.sendData |
|||
第一个参数订阅历史数据 |
|||
第二个参数订阅实时数据 |
|||
第三个参数 是 是否是历史数据 |
|||
*/ |
|||
socket.sendData({ |
|||
req: reso.req, |
|||
id: "id10", |
|||
from: reso.from, |
|||
to: reso.to, |
|||
}, reso.req, history) |
|||
|
|||
Event.off('data') |
|||
|
|||
Event.on('data', data => { |
|||
if (data && Array.isArray(data)) { |
|||
// 记录这次请求的时间周期
|
|||
detafeed_lastResolution = resolution |
|||
var meta = { |
|||
noData: false |
|||
} |
|||
const datas = [] |
|||
if (data.length) { |
|||
detafeed_historyTime = data[0].id |
|||
for (let i of data) { |
|||
i.time = i.id * 1000 |
|||
i.volume = i.vol |
|||
datas.push(i) |
|||
} |
|||
} else { |
|||
meta = { |
|||
noData: true, |
|||
nextTime: detafeed_historyTime |
|||
} |
|||
} |
|||
onHistoryCallback(datas, meta) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
FeedBase.prototype.subscribeBars = function(symbolInfo, resolution, onRealtimeCallback, subscriberUID, onResetCacheNeededCallback) { |
|||
Event.off('realTime') |
|||
// 拿到实时数据 在这里画
|
|||
Event.on('realTime', data => { |
|||
if (Object.prototype.toString.call(data) === '[object Object]' && data.hasOwnProperty('open')) { |
|||
//因为有的数值为科学计数法,故增加了转换函数,因为修改了源码中处理小数点的代码,所以需要二次元运算
|
|||
//如果大于1则根据float形式进行toFixed(2),如果小于1则按照string形式进行截取处理显示
|
|||
let realtimeData = { |
|||
time: data.id * 1000, |
|||
volume: data.vol <= 0.00001 ? transferToNumber(data.vol) : data.vol, |
|||
close: data.close <= 0.00001 ? transferToNumber(data.close) : data.close, |
|||
open: data.open <= 0.00001 ? transferToNumber(data.open) : data.open, |
|||
high: data.high <= 0.00001 ? transferToNumber(data.high) : data.high, |
|||
low: data.low <= 0.00001 ? transferToNumber(data.low) : data.low |
|||
} |
|||
onRealtimeCallback(realtimeData) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
FeedBase.prototype.unsubscribeBars = function(listenerGuid) { |
|||
// 取消订阅产品的callback
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
//处理科学计数法
|
|||
function transferToNumber(inputNumber) { |
|||
if (isNaN(inputNumber)) { |
|||
return inputNumber |
|||
} |
|||
inputNumber = '' + inputNumber |
|||
inputNumber = parseFloat(inputNumber) |
|||
let eformat = inputNumber.toExponential() // 转换为标准的科学计数法形式（字符串）
|
|||
let tmpArray = eformat.match(/\d(?:\.(\d*))?e([+-]\d+)/) // 分离出小数值和指数值
|
|||
let number = inputNumber.toFixed(Math.max(0, (tmpArray[1] || '').length - tmpArray[2])) |
|||
return number |
|||
} |
|||
|
|||
|
|||
}) |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 更多时间类型在这里添加 时间类型请看火币文档 |
|||
* @param resolution 订阅周期 按照自己喜欢的来 如 30 30分钟、 1D 一天 |
|||
* @param name 交易对symbol |
|||
* @param to 结束时间 |
|||
* @returns {object} |
|||
*/ |
|||
const resolutionFormat = (resolution, name, to) => { |
|||
let req = `market.${name}.kline.${resolution}min`; |
|||
let minutes = resolution; |
|||
console.log(resolution) |
|||
if (resolution.includes('D')) { |
|||
if (resolution.length < 2) resolution = '1' + resolution; |
|||
req = `market.${name}.kline.${parseInt(resolution)}day`; |
|||
minutes = parseInt(resolution) * 24 * 60; |
|||
} else if (resolution.includes('W')) { |
|||
if (resolution.length < 2) resolution = '1' + resolution; |
|||
req = `market.${name}.kline.${parseInt(resolution)}week`; |
|||
minutes = parseInt(resolution) * 24 * 60 * 7; |
|||
} else if (resolution.includes('M')) { |
|||
if (resolution.length < 2) resolution = '1' + resolution; |
|||
req = `market.${name}.kline.${parseInt(resolution)}mon`; |
|||
minutes = parseInt(resolution) * 24 * 60 * 30; |
|||
} else { |
|||
if (resolution / 60 > 1) { |
|||
req = `market.${name}.kline.${resolution / 60}hour`; |
|||
} |
|||
} |
|||
|
|||
let from = null; |
|||
if (to) { |
|||
from = to - 50 * minutes * 500; |
|||
if (resolution.includes('M') || resolution.includes('W')) { // 周线月线控制条数，时间超出火币规定范围, ws报错
|
|||
from = to - 50 * minutes * 500; |
|||
} |
|||
} |
|||
|
|||
return { |
|||
minutes, |
|||
req, |
|||
from, |
|||
to, |
|||
}; |
|||
}; |
|||
|
|||
FeedBase.prototype.getBars = function(symbolInfo, resolution, periodParams, onHistoryCallback, onErrorCallback) { |
|||
console.log("获取历史数据",periodParams) |
|||
// 切换产品周期 或者 切换产品 会执行这个函数
|
|||
let reso = resolutionFormat(resolution, symbolInfo.name, periodParams.to) |
|||
// if (resolution.includes('M') || resolution.includes('W')|| resolution.includes('D')) { // 周线月线控制条数，时间超出火币规定范围, ws报错
|
|||
// reso = resolutionFormat(resolution, symbolInfo.name, periodParams.to)
|
|||
// }
|
|||
|
|||
// 是历史数据
|
|||
var history = true |
|||
/* |
|||
!detafeed_historyTime 如果没请请求过这个产品或者这个周期的历史数据 |
|||
resolution !== detafeed_lastResolution 是否更换了产品周期 |
|||
detafeed_lastSymbol !== symbolInfo.name 是否切换了产品 |
|||
*/ |
|||
if (!detafeed_historyTime || (resolution !== detafeed_lastResolution) || detafeed_lastSymbol !== symbolInfo |
|||
.name) { |
|||
// 那就不是历史数据
|
|||
history = false |
|||
// 储存请求过的产品
|
|||
detafeed_lastSymbol = symbolInfo.name |
|||
// 记录目前时间戳，就用目前时间戳往前请求历史数据
|
|||
detafeed_historyTime = window.parseInt((Date.now() / 1000)) |
|||
} |
|||
/* |
|||
@socket.sendData |
|||
第一个参数订阅历史数据 |
|||
第二个参数订阅实时数据 |
|||
第三个参数 是 是否是历史数据 |
|||
*/ |
|||
socket.sendData({ |
|||
event: "req", |
|||
type: "kline", |
|||
channel: [reso.req], |
|||
fromDate:reso.from, |
|||
toDate:reso.to |
|||
}, reso.req, history) |
|||
|
|||
|
|||
Event.off('data') |
|||
|
|||
Event.on('data', data => { |
|||
|
|||
if (data && Array.isArray(data)) { |
|||
// 记录这次请求的时间周期
|
|||
detafeed_lastResolution = resolution |
|||
var meta = { |
|||
noData: false |
|||
} |
|||
const datas = [] |
|||
if (data.length) { |
|||
detafeed_historyTime = data[0].id |
|||
for (let i of data) { |
|||
i.time = i.id * 1000 |
|||
i.volume = i.vol |
|||
datas.push(i) |
|||
} |
|||
} else { |
|||
console.log('进来') |
|||
meta = { |
|||
noData: 'no_data', |
|||
nextTime: detafeed_historyTime |
|||
} |
|||
} |
|||
onHistoryCallback(datas, {noData:data.length==0}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
FeedBase.prototype.subscribeBars = function(symbolInfo, resolution, onRealtimeCallback, subscriberUID, onResetCacheNeededCallback) { |
|||
Event.off('realTime') |
|||
// 拿到实时数据 在这里画
|
|||
Event.on('realTime', data => { |
|||
if (Object.prototype.toString.call(data) === '[object Object]' && data.hasOwnProperty('open')) { |
|||
//因为有的数值为科学计数法,故增加了转换函数,因为修改了源码中处理小数点的代码,所以需要二次元运算
|
|||
//如果大于1则根据float形式进行toFixed(2),如果小于1则按照string形式进行截取处理显示
|
|||
let realtimeData = { |
|||
time: data.id * 1000, |
|||
volume: data.vol <= 0.00001 ? transferToNumber(data.vol) : data.vol, |
|||
close: data.close <= 0.00001 ? transferToNumber(data.close) : data.close, |
|||
open: data.open <= 0.00001 ? transferToNumber(data.open) : data.open, |
|||
high: data.high <= 0.00001 ? transferToNumber(data.high) : data.high, |
|||
low: data.low <= 0.00001 ? transferToNumber(data.low) : data.low |
|||
} |
|||
onRealtimeCallback(realtimeData) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
FeedBase.prototype.unsubscribeBars = function(listenerGuid) { |
|||
// 取消订阅产品的callback
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
//处理科学计数法
|
|||
function transferToNumber(inputNumber) { |
|||
if (isNaN(inputNumber)) { |
|||
return inputNumber |
|||
} |
|||
inputNumber = '' + inputNumber |
|||
inputNumber = parseFloat(inputNumber) |
|||
let eformat = inputNumber.toExponential() // 转换为标准的科学计数法形式（字符串）
|
|||
let tmpArray = eformat.match(/\d(?:\.(\d*))?e([+-]\d+)/) // 分离出小数值和指数值
|
|||
let number = inputNumber.toFixed(Math.max(0, (tmpArray[1] || '').length - tmpArray[2])) |
|||
return number |
|||
} |
|||
|
|||
exports.FeedBase = FeedBase |
|||
@ -1,149 +1,153 @@ |
|||
import { |
|||
Event |
|||
} from './event.js' |
|||
|
|||
import pakoJs from './pako.js' |
|||
|
|||
var pako = pakoJs |
|||
var socket = { |
|||
socket: null, // socket name
|
|||
realTimeData: null, // 请求实时数据的参数
|
|||
intervalObj: null, // 定时器的名字
|
|||
lastRealTimeData: null, // 上一次请求的产品
|
|||
sendData(historyData, realTimeDatas, history) { |
|||
// 储存历史数据
|
|||
this.historyData = historyData |
|||
this.realTimeData = realTimeDatas |
|||
// 如果上一次订阅过产品
|
|||
if (this.lastRealTimeData) { |
|||
// 如果不是订阅历史产品 那么肯定就是切换周期咯 或者 切换产品
|
|||
// 那么就取消订阅上一次的产品实时数据
|
|||
if (!history) { |
|||
console.log('取消订阅' + this.lastRealTimeData) |
|||
this.sendWsRequest({ |
|||
"unsub": this.lastRealTimeData, |
|||
"id": "id1" |
|||
}) |
|||
} |
|||
|
|||
// 请求这一次的历史
|
|||
import |
|||
constant |
|||
from '@/utils/constant.js' |
|||
import { |
|||
Event |
|||
} from './event.js' |
|||
import pakoJs from './pako.js' |
|||
|
|||
var pako = pakoJs |
|||
var socket = { |
|||
socket: null, // socket name
|
|||
id:null, |
|||
realTimeData: null, // 请求实时数据的参数
|
|||
intervalObj: null, // 定时器的名字
|
|||
lastRealTimeData: null, // 上一次请求的产品
|
|||
sendData(historyData, realTimeDatas, history) { |
|||
// 储存历史数据
|
|||
this.historyData = historyData |
|||
|
|||
this.realTimeData = realTimeDatas |
|||
// 如果上一次订阅过产品
|
|||
if (this.lastRealTimeData) { |
|||
|
|||
|
|||
// 请求这一次的历史
|
|||
this.historyData.id=this.id |
|||
this.sendWsRequest(this.historyData) |
|||
console.log(111111,realTimeDatas) |
|||
|
|||
// 如果不是订阅历史产品 那么肯定就是切换周期咯 或者切换产品咯
|
|||
// 那么就订阅一下 这次产品的或者周期的 实时数据
|
|||
if (!history) { |
|||
console.log('订阅新的' + realTimeDatas) |
|||
this.sendWsRequest({ |
|||
"sub": realTimeDatas, |
|||
"id": "id1" |
|||
}) |
|||
} |
|||
} else { |
|||
// 如果是第一次订阅，就是说刚进入交易所，
|
|||
// 先存起来这一次请求的产品 作为历史产品
|
|||
this.lastRealTimeData = this.realTimeData |
|||
// 然后 初始化一下websocket
|
|||
this.initWs() |
|||
} |
|||
}, |
|||
initWs() { |
|||
this.socket = new WebSocket('wss://api.huobi.pro/ws') |
|||
this.socket.onopen = () => { |
|||
this.sendWsRequest(this.historyData) |
|||
this.sendWsRequest({ |
|||
"sub": this.historyData.req, |
|||
"id": "id1" |
|||
}) |
|||
} |
|||
this.socket.onmessage = resp => { |
|||
this.message(resp) |
|||
} |
|||
this.socket.onclose = () => { |
|||
this.close() |
|||
} |
|||
this.socket.onerror = err => { |
|||
this.error(err) |
|||
} |
|||
}, |
|||
error(err) { |
|||
console.log(err, 'depth-socket::error') |
|||
}, |
|||
close() { |
|||
// 如果websocket关闭的话，就从新打开一下。
|
|||
this.initWs() |
|||
console.log('depth-socket::close') |
|||
}, |
|||
|
|||
|
|||
// 如果不是订阅历史产品 那么肯定就是切换周期咯 或者切换产品咯
|
|||
// 那么就订阅一下 这次产品的或者周期的 实时数据
|
|||
if (!history) { |
|||
//console.log('订阅新的' + realTimeDatas)
|
|||
//console.log(111111,realTimeDatas)
|
|||
this.sendWsRequest({ |
|||
event: 'un_sub', |
|||
type: 'kline', |
|||
id: this.id, |
|||
channel:[this.lastRealTimeData], |
|||
}) |
|||
this.lastRealTimeData = this.realTimeData |
|||
} |
|||
} else { |
|||
|
|||
// 如果是第一次订阅，就是说刚进入交易所，
|
|||
// 先存起来这一次请求的产品 作为历史产品
|
|||
this.lastRealTimeData = this.realTimeData |
|||
// 然后 初始化一下websocket
|
|||
this.initWs() |
|||
} |
|||
}, |
|||
initWs() { |
|||
this.socket = new WebSocket(constant.WSSURL) |
|||
this.socket.onopen = () => { |
|||
|
|||
} |
|||
this.socket.onmessage = resp => { |
|||
this.message(resp) |
|||
} |
|||
this.socket.onclose = () => { |
|||
this.close() |
|||
} |
|||
this.socket.onerror = err => { |
|||
this.error(err) |
|||
} |
|||
}, |
|||
error(err) { |
|||
//console.log(err, 'depth-socket::error')
|
|||
}, |
|||
close() { |
|||
// 如果websocket关闭的话，就从新打开一下。
|
|||
this.initWs() |
|||
//console.log('depth-socket::close')
|
|||
}, |
|||
message(resp) { |
|||
//console.log(resp)
|
|||
let this_ = this |
|||
let reader = new FileReader() |
|||
reader.onload = function(e) { |
|||
// 对数据进行解压
|
|||
let msg = JSON.parse(pako.ungzip(reader.result, { |
|||
to: 'string' |
|||
})) |
|||
// console.log(msg)
|
|||
// 如果是实时数据触发Event('realTime') 喂数据
|
|||
if (msg.tick) { |
|||
Event.emit('realTime', msg.tick) |
|||
} |
|||
|
|||
//响应服务器，避免断开连接
|
|||
if (msg.ping) { |
|||
this_.socket.send(JSON.stringify({ |
|||
pong: msg.ping |
|||
})); |
|||
this_.hasCheck = true |
|||
} |
|||
|
|||
this_.lastRealTimeData = this_.realTimeData |
|||
// 如果是历史数据触发Event('data') 绘制数据
|
|||
if (msg.data && Array.isArray(msg.data)) { |
|||
console.log(msg.data) |
|||
Event.emit('data', msg.data) |
|||
} |
|||
|
|||
} |
|||
// //将返回的数据解析为字符串格式
|
|||
reader.readAsArrayBuffer(resp.data); |
|||
}, |
|||
checkSendMessage(options) { |
|||
// 这里处理websocket 连接不上的问题
|
|||
var checkTimes = 10 |
|||
var i = 0 |
|||
this.intervalObj = setInterval(() => { |
|||
i += 1 |
|||
if (this.socket.readyState === 1) { |
|||
// ...
|
|||
this.socket.send(options) |
|||
clearInterval(this.intervalObj) |
|||
return |
|||
} |
|||
if (i >= checkTimes) { |
|||
clearInterval(this.intervalObj) |
|||
console.log('send post_data_str timeout.') |
|||
} |
|||
}, 500) |
|||
}, |
|||
sendWsRequest(options) { |
|||
switch (this.socket.readyState) { |
|||
case 0: |
|||
this.checkSendMessage(JSON.stringify(options)) |
|||
break |
|||
case 1: |
|||
this.socket.send(JSON.stringify(options)) |
|||
break |
|||
case 2: |
|||
console.log('ws关闭状态') |
|||
break |
|||
case 3: |
|||
this.initWs() |
|||
break |
|||
default: |
|||
console.log('ws未知错误') |
|||
} |
|||
} |
|||
} |
|||
|
|||
resp=JSON.parse(resp.data) |
|||
if (resp.channel === 'conn') { |
|||
this.id = resp.data |
|||
|
|||
this.historyData.id=this.id |
|||
this.sendWsRequest(this.historyData) |
|||
|
|||
|
|||
}else { |
|||
if(resp.event === 'req'){ |
|||
|
|||
//Event.emit('data', resp.data)
|
|||
if (resp.data && Array.isArray(resp.data)) { |
|||
Event.emit('data', resp.data) |
|||
} |
|||
this.sendWsRequest({ |
|||
event: 'un_sub', |
|||
type: 'kline', |
|||
id: this.id, |
|||
channel:[this.lastRealTimeData], |
|||
}) |
|||
this.sendWsRequest({ |
|||
event: 'sub', |
|||
type: 'kline', |
|||
id: this.id, |
|||
channel:[this.lastRealTimeData], |
|||
}) |
|||
}else{ |
|||
|
|||
|
|||
Event.emit('realTime', resp.data) |
|||
|
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
}, |
|||
checkSendMessage(options) { |
|||
// 这里处理websocket 连接不上的问题
|
|||
var checkTimes = 10 |
|||
var i = 0 |
|||
this.intervalObj = setInterval(() => { |
|||
i += 1 |
|||
if (this.socket.readyState === 1) { |
|||
// ...
|
|||
this.socket.send(options) |
|||
clearInterval(this.intervalObj) |
|||
return |
|||
} |
|||
if (i >= checkTimes) { |
|||
clearInterval(this.intervalObj) |
|||
//console.log('send post_data_str timeout.')
|
|||
} |
|||
}, 500) |
|||
}, |
|||
sendWsRequest(options) { |
|||
switch (this.socket.readyState) { |
|||
case 0: |
|||
this.checkSendMessage(JSON.stringify(options)) |
|||
break |
|||
case 1: |
|||
this.socket.send(JSON.stringify(options)) |
|||
break |
|||
case 2: |
|||
//console.log('ws关闭状态')
|
|||
break |
|||
case 3: |
|||
this.initWs() |
|||
break |
|||
default: |
|||
//console.log('ws未知错误')
|
|||
} |
|||
} |
|||
} |
|||
|
|||
exports.socket = socket |
|||
@ -0,0 +1,290 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<navigation>{{ content.title }}</navigation> |
|||
|
|||
<!-- #ifdef APP-PLUS --> |
|||
<view class="body-app"> |
|||
<!-- #endif --> |
|||
<!-- #ifdef H5 --> |
|||
<view class="body"> |
|||
<!-- #endif --> |
|||
<view class="content" v-html="content.content"> |
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import UButton from '../../uview-ui/components/u-button/u-button.vue' |
|||
import api from '@/utils/api' |
|||
import md5 from 'js-md5' |
|||
export default { |
|||
name: "caringwomen", |
|||
data() { |
|||
return { |
|||
content:{} |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("login"); |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
this.agreement() |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
onShow() {}, |
|||
methods: { |
|||
// 服务协议 |
|||
agreement() { |
|||
api.agreement({ |
|||
type:'caringwomen' |
|||
}).then(res => { |
|||
this.content=res |
|||
}) |
|||
|
|||
}, |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.content{ |
|||
margin-top: 50rpx; |
|||
text-align: left; |
|||
padding-bottom: 60rpx; |
|||
// HTML+CSS 对于英文单词强制换行但不截断单词的解决办法 |
|||
|
|||
/* 这两个在技术上是一样的, 为了兼容了浏览器两个都加上 */ |
|||
overflow-wrap: break-word; |
|||
word-wrap: break-word; |
|||
|
|||
-ms-word-break: break-all; |
|||
/* 这个的使用在web-kit中有些危险，他可能会阶段所有东西 */ |
|||
word-break: break-all; |
|||
/* Instead use this non-standard one: */ |
|||
word-break: break-word; |
|||
|
|||
/* 如果浏览器支持的话增加一个连接符(Blink不支持) */ |
|||
-ms-hyphens: auto; |
|||
-moz-hyphens: auto; |
|||
-webkit-hyphens: auto; |
|||
hyphens: auto; |
|||
} |
|||
.main { |
|||
|
|||
.body { |
|||
margin-top: 204rpx; |
|||
padding: 0 40rpx; |
|||
overflow: hidden; |
|||
|
|||
.welcomeText { |
|||
margin-top: 48rpx; |
|||
font-size: 48rpx; |
|||
font-weight: 800; |
|||
text-align: center; |
|||
} |
|||
|
|||
.signInText { |
|||
font-size: 32rpx; |
|||
text-align: center; |
|||
color: #A2A0A8; |
|||
} |
|||
|
|||
.form { |
|||
font-size: 32rpx; |
|||
margin-top: 48rpx; |
|||
|
|||
.input-item { |
|||
height: 112rpx; |
|||
line-height: 112rpx; |
|||
background: #211F32; |
|||
margin-bottom: 48rpx; |
|||
border-radius: 32rpx; |
|||
|
|||
.icon { |
|||
margin: 0 24rpx; |
|||
} |
|||
|
|||
/deep/.u-form-item__body { |
|||
padding: 0; |
|||
} |
|||
|
|||
.input { |
|||
height: 112rpx; |
|||
} |
|||
} |
|||
|
|||
.vCode { |
|||
|
|||
.getVCodeBtn { |
|||
// position: absolute; |
|||
width: 154rpx; |
|||
height: 56rpx; |
|||
right: 28rpx; |
|||
// top: 14px; |
|||
border-radius: 8px; |
|||
line-height: 56rpx; |
|||
font-size: 24rpx; |
|||
color: #00E8A2 !important; |
|||
padding: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.agree { |
|||
font-size: 28rpx; |
|||
|
|||
.check { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
margin-right: 32rpx; |
|||
} |
|||
|
|||
.text { |
|||
display: inline-block; |
|||
width: 542rpx; |
|||
} |
|||
|
|||
span { |
|||
cursor: pointer; |
|||
color: #00E8A2; |
|||
padding: 0 10rpx; |
|||
|
|||
} |
|||
} |
|||
|
|||
.button { |
|||
margin-top: 64rpx; |
|||
height: 112rpx; |
|||
line-height: 112rpx; |
|||
border-radius: 32rpx; |
|||
font-size: 32rpx; |
|||
color: #15141F !important; |
|||
} |
|||
|
|||
.signUp { |
|||
margin: 48rpx 0; |
|||
text-align: center; |
|||
font-size: 32rpx; |
|||
|
|||
.navigator { |
|||
display: inline; |
|||
color: #00E8A2; |
|||
padding: 0 10rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
.body-app{ |
|||
margin-top: 204rpx !important; |
|||
padding: 0 40rpx; |
|||
overflow: hidden; |
|||
|
|||
.welcomeText { |
|||
margin-top: 48rpx; |
|||
font-size: 48rpx; |
|||
font-weight: 800; |
|||
text-align: center; |
|||
} |
|||
|
|||
.signInText { |
|||
font-size: 32rpx; |
|||
text-align: center; |
|||
color: #A2A0A8; |
|||
} |
|||
|
|||
.form { |
|||
font-size: 32rpx; |
|||
margin-top: 48rpx; |
|||
|
|||
.input-item { |
|||
height: 112rpx; |
|||
line-height: 112rpx; |
|||
background: #211F32; |
|||
margin-bottom: 48rpx; |
|||
border-radius: 32rpx; |
|||
|
|||
.icon { |
|||
margin: 0 24rpx; |
|||
} |
|||
|
|||
/deep/.u-form-item__body { |
|||
padding: 0; |
|||
} |
|||
|
|||
.input { |
|||
height: 112rpx; |
|||
} |
|||
} |
|||
|
|||
.vCode { |
|||
|
|||
.getVCodeBtn { |
|||
// position: absolute; |
|||
width: 154rpx; |
|||
height: 56rpx; |
|||
right: 28rpx; |
|||
// top: 14px; |
|||
border-radius: 8px; |
|||
line-height: 56rpx; |
|||
font-size: 24rpx; |
|||
color: #00E8A2 !important; |
|||
padding: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.agree { |
|||
font-size: 28rpx; |
|||
|
|||
.check { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
margin-right: 32rpx; |
|||
} |
|||
|
|||
.text { |
|||
display: inline-block; |
|||
width: 542rpx; |
|||
} |
|||
|
|||
span { |
|||
cursor: pointer; |
|||
color: #00E8A2; |
|||
padding: 0 10rpx; |
|||
|
|||
} |
|||
} |
|||
|
|||
.button { |
|||
margin-top: 64rpx; |
|||
height: 112rpx; |
|||
line-height: 112rpx; |
|||
border-radius: 32rpx; |
|||
font-size: 32rpx; |
|||
color: #15141F !important; |
|||
} |
|||
|
|||
.signUp { |
|||
margin: 48rpx 0; |
|||
text-align: center; |
|||
font-size: 32rpx; |
|||
|
|||
.navigator { |
|||
display: inline; |
|||
color: #00E8A2; |
|||
padding: 0 10rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
Before Width: | Height: | Size: 254 KiB After Width: | Height: | Size: 70 KiB |
Loading…
Reference in new issue