2 changed files with 218 additions and 6 deletions
@ -0,0 +1,157 @@ |
|||
|
|||
<!--<template>--> |
|||
<!-- <div>--> |
|||
<!-- WebSocket Test--> |
|||
<!-- </div>--> |
|||
<!--</template>--> |
|||
|
|||
<!--<script>--> |
|||
|
|||
<!--import {mapState} from "vuex";--> |
|||
|
|||
<!--const synth = window.speechSynthesis // 启用文本--> |
|||
<!--const msg = new SpeechSynthesisUtterance()--> |
|||
<!--export default {--> |
|||
<!-- name: 'WebSocketTest',--> |
|||
<!-- data() {--> |
|||
<!-- return {--> |
|||
<!-- ws: null, // WebSocket实例--> |
|||
<!-- name:'', // WebSocket实例--> |
|||
<!-- // 添加用于配置WebSocket的响应式数据--> |
|||
<!-- socketConfig: {--> |
|||
<!-- password: 'zc&ws123',--> |
|||
<!-- // tokenSN: this.token, // 如--> |
|||
<!-- heartRate: 1000, // 示例心跳间隔时间--> |
|||
<!-- },--> |
|||
<!-- };--> |
|||
<!-- },--> |
|||
<!-- computed: {--> |
|||
<!-- ...mapState({--> |
|||
<!-- token: state => state.user.token,--> |
|||
<!-- websocket: state => state.user.websocket--> |
|||
<!-- })--> |
|||
<!-- },--> |
|||
<!-- created() {--> |
|||
<!-- this.initWebSocket();--> |
|||
<!-- },--> |
|||
<!-- beforeDestroy() {--> |
|||
<!-- if (this.ws) {--> |
|||
<!-- this.ws.close();--> |
|||
<!-- }--> |
|||
<!-- },--> |
|||
<!-- methods: {--> |
|||
<!-- // 语音播报的函数--> |
|||
<!-- handleSpeak(text) {--> |
|||
<!-- msg.text = text // 内容--> |
|||
<!-- msg.lang = 'zh-CN' // 使用的语言:中文--> |
|||
<!-- msg.volume = 1 // 声音音量：1--> |
|||
<!-- msg.rate = 1 // 语速：1--> |
|||
<!-- msg.pitch = 1 // 音高：1--> |
|||
<!-- synth.speak(msg) // 播放--> |
|||
<!-- },--> |
|||
<!-- // 语音停止--> |
|||
<!-- handleStop(e) {--> |
|||
<!-- msg.text = e--> |
|||
<!-- msg.lang = 'zh-CN'--> |
|||
<!-- synth.cancel(msg) // 取消该次语音播放--> |
|||
<!-- },--> |
|||
<!-- open2(message){--> |
|||
<!-- this.$notify({--> |
|||
<!-- title: '提示',--> |
|||
<!-- message: message,--> |
|||
<!-- duration: 0--> |
|||
<!-- });--> |
|||
<!-- },--> |
|||
<!-- initWebSocket() {--> |
|||
<!-- const { password, heartRate ,tokenSN} = this.socketConfig;--> |
|||
|
|||
<!-- const url = 'ws://' + location.hostname + ':7789/ws';--> |
|||
|
|||
<!-- this.ws = new WebSocket(url);--> |
|||
|
|||
<!-- this.ws.onmessage = (message) => {--> |
|||
<!-- console.log('WebSocket 收到的数据', message.data);--> |
|||
|
|||
<!-- message = JSON.parse(message.data);--> |
|||
<!-- const method = message.method;--> |
|||
|
|||
<!-- if (method !== 'event') {--> |
|||
<!-- return;--> |
|||
<!-- }--> |
|||
|
|||
<!-- const params = message.params;--> |
|||
<!-- const subEvent = params.subEvent;--> |
|||
<!-- const content = params.content;--> |
|||
|
|||
<!-- switch (subEvent) {--> |
|||
<!-- case '1':--> |
|||
<!-- console.log('WebSocket 视频AI:', content);--> |
|||
|
|||
<!-- this.handleSpeak(content) // 传入需要播放的文字--> |
|||
<!-- break;--> |
|||
<!-- case '0':--> |
|||
<!-- console.log('WebSocket 手动录入:', content);--> |
|||
<!-- console.log('WebSocket 手动录入:', content.event);--> |
|||
<!-- console.log('WebSocket 手动录入:', content.content);--> |
|||
<!-- this.open2(content.content);--> |
|||
<!-- this.handleSpeak(content) // 传入需要播放的文字--> |
|||
<!-- break;--> |
|||
<!-- default:--> |
|||
<!-- }--> |
|||
<!-- };--> |
|||
|
|||
<!-- // 添加其他WebSocket事件监听--> |
|||
<!-- this.ws.onopen = this.onOpen;--> |
|||
<!-- this.ws.onerror = this.onError;--> |
|||
<!-- this.ws.onclose = this.onClose;--> |
|||
<!-- },--> |
|||
|
|||
<!-- onOpen(event) {--> |
|||
<!-- console.log('WebSocket opened:', event);--> |
|||
<!-- },--> |
|||
<!-- onError(event) {--> |
|||
<!-- console.error('WebSocket error:', event);--> |
|||
<!-- },--> |
|||
<!-- onClose(event) {--> |
|||
<!-- console.log('WebSocket closed:', event);--> |
|||
<!-- },--> |
|||
<!-- },--> |
|||
<!--};--> |
|||
<!--</script>--> |
|||
|
|||
<template> |
|||
<div> |
|||
<input v-model="inputValue" @input="formatInput" type="text"> |
|||
<p>格式化后的值: {{ formattedValue }}</p> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
inputValue: '', // 用户输入的原始值 |
|||
formattedValue: '' // 格式化后的值，用于显示 |
|||
}; |
|||
}, |
|||
watch: { |
|||
inputValue(newValue) { |
|||
this.formattedValue = this.formatToThreeDigits(newValue); |
|||
}, |
|||
}, |
|||
methods: { |
|||
formatInput(e) { |
|||
// 确保输入只包含数字，并且最多三位 |
|||
const value = e.target.value.replace(/[^0-9]/g, ''); |
|||
if (value.length > 3) { |
|||
this.inputValue = value.slice(0, 3); // 如果超过三位，截取前三位 |
|||
} else { |
|||
this.inputValue = value; |
|||
} |
|||
}, |
|||
formatToThreeDigits(value) { |
|||
return value.padStart(3, '0'); // 不足三位前面补0 |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
Loading…
Reference in new issue