Vue连接WebSocket后，监听消息并读取消息内容（onmessage事件），解决将内容赋值到data的属性失败的问题

xiaoPANee

已于 2023-03-03 11:34:42 修改

阅读量4.4k

点赞数 4

文章标签： vue.js websocket 前端

于 2023-03-03 11:31:42 首次发布

本文链接：https://blog.csdn.net/xiaoPANee/article/details/129315830

版权

在开发IM模块时，通过服务端转发客户端消息，前端组件数据无法正常刷新。原来是`socket.onmessage`的回调函数使用方式导致，将function改为箭头函数解决了问题。

摘要由CSDN通过智能技术生成

技术栈

前端Vue （包括一些组件、中间件）
后端分布式微服务

这里就不再详述后端是怎么开发通信服务端的了，因为我主要是后端开发，前端开发花的时间几乎是后端的两倍还要多（其实比较简单，只是自己前端真的不得行🤪）

最近在开发项目里的一个IM（实时通信）模块功能的时候发现，通过服务端转发客户端消息的时候，前端组件的数据一直没办法正常刷新，耗了很久，去查结果发现网上都没有我想要的答案（都是千篇一律的答案），最后还是没解决，那好吧，只能🪜看看了

好了，不废话了，直接上代码解决吧：

原来写法 socket.onmessage = function (event) {...}
新的写法 socket.onmessage = (event) => {...}

简单代码演示：

<template>
	<div>
		<p>{
  {tempContent}}</p>
	</div>
</template>
<script>
export default {
     
    name: "Test",
    data() {
     
        return {
     
        	socket: null, // 这里定义一个变量，因为后面有其他方法也要用到这个socket通道通信
            tempContent: 'Now is null'
        }
    },
    method