zoukankan      html  css  js  c++  java
  • 【前端开发】websoket即时通信js库SockJS和Stomp的使用教程

    前言:我是在vue+ts环境中写的

    // 引入
    import SockJS from 'sockjs-client'
    import Stomp from 'stompjs'
    // 进入主页时执行连接,浏览器有打印说明连接成功,接下来待后端发消息就存储到store,最后渲染即可
    let stomp = null
    const url = 'http://10.14.2.66:18000/ws'
    const socket = new SockJS(url, null, { timeout: 30000 })
    stomp = Stomp.over(socket)
    const _this = this
    //连接
    stomp.connect({ userId: 1 }, function() {
      stomp.subscribe('/user/topic/todo', function(res) {
    // 存储store _this.$store.commit(
    'setMsgContent', res.body) }) stomp.subscribe('/user/topic/loginout', function() {}) })
    // 在需要渲染组件中监听是否有发消息,若发了则在组件中显示出来
    computed: { logMsg() {
    return this.$store.getters.getMsgContent } }, watch: { logMsg(val) {
    // 拿到store中存储的消息
    this.logList = this.logList && this.logList.concat(JSON.parse(val)) localStorage.setItem('logList', JSON.stringify(this.logList)) this.logKey += 1 if (JSON.parse(val).ifFinish) { this.showLoading = false } } },

    更详细的demo源码见:https://gitee.com/zh888/sock-demo

  • 相关阅读:
    微信强制更新版本机制
    js常用函数
    小程序--三级联动
    vue基础知识总结
    vuex基础知识总结
    vue-cli新手总结
    css---switch开关
    flutter 主题切换
    flutter 监听返回键
    flutter-常用按钮(爬取转载)
  • 原文地址:https://www.cnblogs.com/xiaohuizhang/p/15193933.html
Copyright © 2011-2022 走看看