uniapp引用外部js_UNIAPP使用SockJS和Stomp不完全指北

前言

如果只是初步使用websocket进行一些简单的业务逻辑交互，此文章可以直接跳过，它将不会给你带来太多的帮助。

如果只是初步使用websocket进行一些简单的业务逻辑交互，此文章可以直接跳过，它将不会给你带来太多的帮助。

如果只是初步使用websocket进行一些简单的业务逻辑交互，此文章可以直接跳过，它将不会给你带来太多的帮助。

重要的事情说三遍

本文内容较多，主要是一些试错的全过程，并且全程在小程序开发工具上测试

因为我司在PC端的项目使用的SockJS+Stomp构建的websocket消息体系，所以在使用UNIAPP构建小程序时应保留该特性，来保证项目的统一完整性。

啥玩意？UNIAPP的websocket不香吗？不好吗？用个锤子的SockJS+Stomp？

我相信，大多数朋友拿到这个需求的时候第一反应是这个，但是又有什么办法呢，我仅仅是一个为了生活而屈服的码农而已。

开始

刚开始，想着无非是使用两个库，通过NPM的方式加载两个库，然后根据文档一步步的配置不就OK了吗？这不是So easy，直接动手。

1、通过NPM引用两个JS库

具体操作请参照UNIAPP官网NPM支持

通过Yarn或者NPM安装sockjs-client以及stompjs

yarn add sockjs-client stompjs

很容易就可以将这两个库加入我们的小程序中，是不是很简单，接下来就是按部就班的引用和配置了。我们在App.vue中加入如下代码：

import Stomp from 'stompjs'
import SockJS from "sockjs-client";

onLoad() {
    
  const websocket = new SockJS("ws://websocket");
  const stompClient = Stomp.over(websocket);
  stompClient.connect(
    {},
    (res) => {
    
        console.log(res)
    },
    (error) => {
    
        console.error('error', error)
    }
  );
}

心想着，这么简单的活我要了一整天，今天看来又能愉快的划水摸鱼了，开开心心的在开发工具中运行我们的程序。

然后我一脸懵的看着这个调试工具，我的socket连接呢？？？算了，一次不成功也没啥，好事多磨嘛，先去console里面看看有没有什么异常。

UNIAPP里面调用原生JS的DOM操作？？？作死也不是这样作死的好吗？谁都知道小程序里面没有原生的DOM操作！！！不过，额，好像这两个库也没说支持小程序把....作孽啊！！！

看了看手机里面某呗还款的提醒，哎......一分钱ÿ