uniapp中使用renderjs(示例sse即时通讯)

APP中没用Dom元素这个概念，renderjs可以直接操作DOM

比如我们在uniapp中使用sse(即时通讯)

页面的div，当变量str发生改变的时候，就会触发renderScript中的 onChange事件

<view :prop="gptStr" :change:prop="renderScript.onChange"
 id="renderjs-view" @click="renderScript.emitData"
	v-show="false"></view>

<script module="renderScript" lang="renderjs">
export default {
		data() {
			return {
				IsSupportSse: 'EventSource' in window,
				isHandlingChange: false,
				timers: null,
				source: null,
				status: false,
			}
		},
		mounted() {
			//页面刷新或关闭时调用
			window.addEventListener('beforeunload', () => {
				this.source.close()
			})
			const view = document.getElementById('renderjs-view')
			const button = document.createElement('button')
			button.innerText = '一个按钮'
			view.appendChild(button)
		},
		methods: {
		  onChange(newValue, oldValue, ownerInstance, instance) {
				newValue = JSON.parse(JSON.stringify(newValue))
				if (newValue['gptStrText'] !== '') {
					if (newValue['gptStrText'] !== oldValue && newValue.btnConfirmStatus) {
						if (this.source) this.source.close()
						clearTimeout(this.timers)
						this.timers = setTimeout(() => {
							this.sse('你的接口地址')
						}, 500)
					}
				}
		   },
		   			// 发送数据到service层
			emitData(message, created) {
				UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
					cid: this._$id,
					method: 'acceptDataFromRenderjs',
					args: {
						message: message,
						created: created,
						status:false,
					}
				})
			},
			sse(newSessionForm) {
				let url = ''
				url = newSessionForm
				// 检查浏览器是否支持SSE
				let that = this
				let newText = ''
				console.log('地址...', url);
				this.source = new EventSource(url)
				this.source.onmessage = function(event) {
				console.log('监听信息的传输...');
				const data = JSON.parse(event.data)
				if (Array.isArray(data) && !data?.length) {
JSON.stringify(JSON.parse(that.source.readyState)));
						console.log('*****客户端-服务端通讯中*******', JSON.stringify(JSON.parse(data.choices[0].delta.content)));
					}
					if (data.choices?.length) {
						if (data.choices[0].delta.content !== '') {
							console.log('------newText------', newText);
							if (data.choices.length > 0) {
								newText += data?.choices[0]?.delta?.content
								that.emitData(newText, data?.created)
							}

						}
					}
				}

				this.source.onopen = function() {
					console.log('---连接建立中---');
					//当连接正式建立时触发 
				}
				this.source.onerror = function(e) {
					console.log('---连接关闭---');
					that.source.close()
				}
			},
	    }
}
</script>

emitData方法发送的acceptDataFromRenderjs事件，在我们原有的script中可以监听道

	data() {
			return {
				gptStr: {
					btnConfirmStatus: false,
					gptStrText:'',
				}
			}
  },
methods: {
		acceptDataFromRenderjs(options) {
				let newStr = options.message.replace(/undefined/g, '');
				this.gptStr.btnConfirmStatus = options.status
			},
		}

总之就是类似父子组件通信一样，原有的<script />为父组件，然后<script module="renderScript" lang="renderjs">为子组件