前言
如果只是初步使用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操作!!!不过,额,好像这两个库也没说支持小程序把....作孽啊!!!
看了看手机里面某呗还款的提醒,哎......一分钱ÿ