Vue-WebSocket简单聊天室的实现及样式

背景

​ 一个简单的WebSocket聊天室的实现。

预览效果

以下展示数据为模拟数据。

image-20210925183241523

具体实现
/** 连接 */
connectWebSocket() {
  if ('WebSocket' in window) {
    this.websocket = new WebSocket(process.env.VUE_APP_WS_BASE_API + '')
    this.initWebSocket()
  } else {
    alert('当前浏览器不支持WebSocket,请更换为Chrome浏览器。')
  }
},

/** webSocket初始化 */
initWebSocket() {
  // 连接错误
  this.websocket.onerror = this.setErrorMessage
  // 连接成功
  this.websocket.onopen = this.setOnopenMessage
  // 收到消息的回调
  this.websocket.onmessage = this.setOnmessageMessage
  // 连接关闭的回调
  this.websocket.onclose = this.setOncloseMessage
  // 监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
  window.onbeforeunload = this.onbeforeunload
},
  
/** 连接错误事件通知处理 */
setErrorMessage() {
  this.websocketStatus = 0
  this.$notify.error({ title: '错误', message: '服务器连接失败,请刷新页面重试!' })
  console.log(`log-WebSocket连接发生错误,状态码:${this.websocket.readyState}`)
},

/** 连接成功事件通知处理 */
setOnopenMessage() {
  this.websocketStatus = 1
  if (this.websocketReconnection !== 1) {
    this.$notify({ title: '成功', message: '服务器连接成功', type: 'success' })
    console.log(`log-WebSocket连接成功,状态码:${this.websocket.readyState}`)
  }
  if (this.websocketReconnection === 1) {
    if (!this.roomOneId) {
      return
    }
    if (!this.roomOneUserInfo.userId) {
      return
    }
    console.log(`log-正在尝试重新加入【${this.roomOneTitle}】直播间...`)
    // 业务方法 这里不展示
    this.wsJoinRoom(this.roomOneId, this.roomOneUserInfo)
  }
},

/** 收到消息事件通知处理 */
setOnmessageMessage(event) {
  let data = JSON.parse(event.data)
  // console.log(`log-服务端推送消息 data:${JSON.stringify(data)}`)
  // 业务方法 这里不展示
  // 大概就是:处理服务端推送消息 展示到前端
  this.handleServerPushMsg(data)
},
  
/** 连接关闭事件通知处理 */
setOncloseMessage() {
  this.websocketStatus = 0
  this.websocketReconnection = 1
  console.log(`log-WebSocket连接关闭,状态码:${this.websocket.readyState}`)
  console.log(`log-正在尝试重新连接...`)
  this.connectWebSocket()
},
 
/** 监听窗口关闭事件通知处理 */
onbeforeunload() {
  this.closeWebSocket()
},

/** 关闭websocket */
closeWebSocket() {
  this.websocket.close()
},

/** websocket发送消息 */
sendWebSocket(msg) {
  this.websocket.send(msg)
},

这里只展示核心关于操作websocket的代码,具体相关业务实现代码不展示!

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Vue3和WebSocket聊天室,可以根据以下步骤进行实现: 1. 首先,创建一个Vue3的项目并安装Vue3和WebSocket的依赖。可以使用Vue CLI来创建项目,并使用npm或yarn来安装依赖。 2. 在Vue3的项目中,可以使用Vue的Composition API来处理WebSocket的逻辑。通过引入WebSocket库,可以在Vue组件中创建WebSocket实例,并使用其提供的方法进行连接、发送消息和接收消息。 3. 在Vue组件中,可以创建一个WebSocket连接,并在组件的生命周期钩子中进行连接的初始化。可以使用`onopen`事件监听连接是否成功,`onmessage`事件监听接收到的消息,以及`onclose`事件监听连接关闭的情况。 4. 在Vue组件中,可以定义发送消息的方法,将要发送的消息作为参数传入WebSocket的`send`方法。 5. 在Vue模板中,可以使用`v-for`指令来循环渲染消息列表,可以使用`v-model`指令来双向绑定输入框的内容,并在发送按钮上绑定发送消息的方法。 6. 可以在Vue组件中使用计算属性来对接收到的消息进行处理,例如格式化时间、过滤敏感词等。 7. 最后,可以在Vue组件中使用样式和布局来美化聊天室的界面,例如设置消息框的样式、聊天框的大小等。 通过以上步骤,你可以实现一个基于Vue3和WebSocket聊天室。这样的聊天室可以实现实时通信,并且不需要轮询服务器,节省了资源并提高了效率。如果你需要更具体的代码示例和详细的配置说明,可以参考提供的使用Java和Vue2.0开发的WebSocket聊天室Demo。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值