开发面试题 java 测试用例 远程桌面登陆 Apache Pivot教程 java反射机制 jsp http vuejs2 cos图像和sin图像 mysql删除一列 时间戳java js基本数据类型有哪些 python输入输出 python课程 python代码 python网页编程 python写入文件 java入门级教程 java日期 java集成 java判断语句 java输出当前时间 java连接数据库代码 java字符 java程序设计教程 python视频教程 ntscan rndis驱动下载 神龙激活 bash命令 python封装 地球末日攻略 视频相册制作软件 亚索刀光 ps制作表格 python缩进规则 dnf瞎子传说套选择 租房管理软件 重复文件查找
当前位置: 首页 > 学习教程  > 编程语言

vue + 基于socket.io-client与服务端实现即时消息交互

2021/1/13 19:45:19 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

WebSocket介绍 基于TCP的协议,由通信协议和编程API组成,能在浏览器和服务器之间建立双向连接,以基于事件的方式,赋予浏览器实时通信的能力,即服务器和客户端之间可以同时发送并响应请求,且页面不刷新能够获…

WebSocket介绍

基于TCP的协议,由通信协议和编程API组成,能在浏览器和服务器之间建立双向连接,以基于事件的方式,赋予浏览器实时通信的能力,即服务器和客户端之间可以同时发送并响应请求,且页面不刷新能够获取到数据。

安装依赖

npm install vue-socket.io --sava

全局引用

main.js文件中
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(new VueSocketIO({
  debug: true,
  // url路径填服务器的接口
  connection: SocketIO.connect('http://xxxxxx', {
    path: '',
    // autoConnect: false,
    transports: ['websocket', 'xhr-polling', 'jsonp-polling']
  })
}))
// 在main.js 打印连接成功后的提示
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
} else {
  instance = new Vue({
    sockets: {
      connecting() {
        console.log('正在连接')
      },
      disconnect() {
        console.log('Scoket 断开')
      },
      connect_failed() {
        console.log('连接断开')
      },
      connect(data) {
        console.log(data)
        console.log('socket connected')
      }
    },
    router,
    store,
    i18n,
    Blob,
    // Export2Excel,
    Rollingplan,
    Enum,
    render: h => h(App)
  }).$mount('#rpApp')
}

连接成功的图示:
在这里插入图片描述
在这里插入图片描述

组件中使用

// 在methods定义方法:连接socket,并且mouted()中调用,页面加载就显示数据
this.socket = this.$socketio.connect('http://192.168.0.44:9092')
      console.log(this.socket)
      this.socket.on('connect', function(data) {
        console.log(data)
        console.log('连接成功')
      })
// 获取服务器发送的数据
this.socket.on('chatEvent', async function(data) {
        console.log(data)
})

连接成功的话,在控制台是可以打印出来的
在这里插入图片描述
也可以打印socket,查看socket的属性,连接成功的话,connected:true
在这里插入图片描述
最后,能够拿到服务器发送的数据,且每次服务器发送信息的时候,客户端都会不刷新获取到信息。


本文链接: http://www.dtmao.cc/news_show_600184.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?