王兴琳
5 months ago
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