vue websocket实现聊天

第一次写聊天,之前都不知道websocket是个啥,我是直接百度查的直接拿过来抄的,直接就可以用,节省时间了挺好,但是我发现了一个问题,只有后台服务重启后才可以实时接收信息,关闭再次连接就不能接收信息,离了个大谱,朋友说是长链接的问题

主要的代码

let url="你的地址"
this.ws = new WebSocket(url);

 // 接收服务端数据时触发事件---打开连接
    this.ws.onopen = (evt) => {
    };
    // 接收服务端数据时触发事件---接收的消息
    this.ws.onmessage = (evt) => {
    };
//发送内容sendbody
  this.ws.send(JSON.stringify(sendBody));

    // 用于指定报错时的回调函数
    this.ws.onerror = function(event) {
  
    };
//与created同级,跳转路径时自动调用关闭聊天通话
  destroyed() {
   
    this.ws.close();
    this.ws.onclose = function () {
}
}

结果长链接问题后台也不知道怎么解决,我们就写了接口拿到发送的信息,用定时器3秒轮巡查发送的信息,哭死,哎,所以有人知道怎么解决吗?求解啊

  • 8
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,我理解你的问题是关于Vue.js中使用WebSocket实现聊天室的问题。下面是一个简单的示例代码: 首先,你需要在Vue.js组件中引入WebSocket: ```javascript import { io } from 'socket.io-client'; ``` 然后,在Vue.js组件中,你需要创建WebSocket连接并监听消息: ```javascript export default { data() { return { messages: [], inputMessage: '', socket: null }; }, mounted() { this.socket = io('http://localhost:3000'); this.socket.on('connect', () => { console.log('connected'); }); this.socket.on('message', (message) => { this.messages.push(message); }); }, methods: { sendMessage() { this.socket.emit('message', this.inputMessage); this.inputMessage = ''; } } } ``` 这里,我们使用了socket.io-client库来创建WebSocket连接。在mounted钩子函数中,我们连接到服务器并监听connect和message事件。当服务器发送消息时,我们将其添加到messages数组中。在sendMessage方法中,我们将用户的输入发送到服务器。 最后,在Vue.js模板中,你可以使用v-for指令来渲染消息列表,以及v-model指令来绑定用户的输入: ```html <template> <div> <ul> <li v-for="(message, index) in messages" :key="index">{{ message }}</li> </ul> <input type="text" v-model="inputMessage" @keyup.enter="sendMessage"> <button @click="sendMessage">发送</button> </div> </template> ``` 这是一个简单的Vue.js聊天室的示例。当然,你还需要在服务器端实现WebSocket服务器,并处理连接和消息事件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值