微信小程序:uniapp+WebSocket实现订单提醒

本文介绍了如何在校园版美团外卖项目中,利用uniapp结合WebSocket技术实现订单提醒功能。文章详细讲解了从导入后端pom文件、后端实现到前端实现的步骤,并提到了在微信小程序环境中遇到的WebSocket连接问题,指出了解决该问题需要对IP进行备案。
摘要由CSDN通过智能技术生成

背景

做的一个校园版的美团外卖项目,这里分享一下订单提醒功能,使用uniapp+WebSocket实现。

开始

一、导入pom

<!--socket-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

二、后端实现

package com.ningxun.restcard.controller;

import com.alibaba.fastjson.JSONObject;
import com.ningxun.restcard.auth.UserAuthenticationProvider;
import com.ningxun.restcard.entity.StudentUserEntity;
import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jwts;
import org.apache.commons.lang.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;

//这个是客户端访问的接口
@ServerEndpoint("/imserver/app/{token}")
@Component
public class WebSocketServerApp {
   

    //日志
    static Logger log = LoggerFactory.getLogger(WebSocketServerApp.class);
    /**
     * 静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
     */
    private static int onlineCount = 0;

    /**
     * concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
     */
    //新建一个ConcurrentHashMap webSocketMap 用于接收当前userId的WebSocket,方便IM之间对userId进行推送消息。
    private static ConcurrentHashMap<String, WebSocketServerApp> webSocketMap = new ConcurrentHashMap<>();
    /**
     * 与某个客户端的连接会话,需要通过它来给客户端发送数据
     */
    private Session session;
    //    /**接收userId*/
    private String userId = "";

    public static Session temp;

    public static boolean flag = false;

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("token") String token) {
   
        //解析JWT
        Claims claims = Jwts.parser()
                .setSigningKey(UserAuthenticationProvider.STORE_PWD
  • 3
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: UniApp 是一款使用 Vue.js 开发跨平台应用的框架,对于 WebSocket 的封装,UniApp 已经内置了 websocket 模块,可以使用它实现 WebSocket 通信。步骤如下: 1. 在需要使用 WebSocket 的页面导入 websocket 模块:`import websocket from '@dcloudio/web-socket-uni/dist/index.js'` 2. 创建 WebSocket 连接:`const socketTask = websocket.connectSocket({url: 'ws://xxx'})` 3. 监听 WebSocket 事件:`socketTask.onOpen(res => {})`、`socketTask.onMessage(res => {})`、`socketTask.onClose(res => {})` 等 4. 发送 WebSocket 数据:`socketTask.send({data: 'xxx'})` 5. 关闭 WebSocket 连接:`socketTask.close()` 有关详细的使用方法,请参考 UniApp 官方文档:https://uniapp.dcloud.io/api/socket。 ### 回答2: Uniapp是一款非常优秀的跨平台开发工具,它支持多种前端框架,并提供了很多API,其中就包括了WebSocket API。但是,Uniapp并没有对WebSocket API进行封装,需要我们自己根据需求进行封装。 首先,我们需要创建一个websocket.js文件,该文件用于封装WebSocket实例对象的创建、发送消息和接收消息等操作。我们可以通过调用Uniapp提供的wx.connectSocket()和wx.onSocketOpen()等API来创建和管理WebSocket实例。在封装时,我们可以定义一个对象,该对象包含WebSocket实例的属性和方法,以便于调用。以下是一个简单的WebSocket封装示例: ```javascript const WS = { ws: null, connected: false, create(url) { this.ws = uni.connectSocket({ url: url }) }, close() { this.ws.close({ success: () => { this.connected = false } }) }, send(data) { if (this.connected) { this.ws.send({ data: JSON.stringify(data) }) } }, onOpen(callback) { this.ws.onOpen(() => { this.connected = true callback && callback() }) }, onMessage(callback) { this.ws.onMessage(res => { callback && callback(JSON.parse(res.data)) }) }, onError(callback) { this.ws.onError(callback) }, onClose(callback) { this.ws.onClose(() => { this.connected = false callback && callback() }) } } export default WS ``` 以上代码中,我们定义了一个名为WS的对象,包含了WebSocket实例的一些常用属性和方法,例如create()、send()、onOpen()、onMessage()、onError()和onClose(),以便于对WebSocket进行调用。此外,我们还定义了一个connected属性,用于判断WebSocket是否连接成功。 在使用WebSocket时,我们可以引入websocket.js文件,并通过create()方法创建WebSocket实例。此外,我们还需要重写页面的onUnload()生命周期方法,在页面卸载时关闭WebSocket连接。 ```javascript import WS from "@/utils/websocket" onLoad() { WS.create("ws://localhost:8080") }, onUnload() { WS.close() } ``` 对于WebSocket的发送和接收消息,我们可以通过send()和onMessage()方法来实现。其中,send()方法需要传递消息体,而onMessage()方法需要传递一个回调函数,在接收到服务器的消息时会回调该函数。 ```javascript WS.send({ action: 'send', message: 'hello world' }) WS.onMessage(res => { console.log(res) }) ``` 以上就是对UniappWebSocket的简单封装。封装后,我们可以在多个页面中使用同一个WebSocket实例,而不需要每个页面都去创建一个实例,这样既可以提高代码复用性,也可以减少资源占用。同时,通过封装,我们还可以更加方便地对WebSocket进行管理和维护,从而提高WebSocket的可靠性和稳定性。 ### 回答3: uniapp框架可以通过封装WebSocket实现基于WebSocket的应用,实现客户端和服务端的双向通信。WebSocket的封装可以使用uniapp提供的API方法,也可以使用第三方库。下面是一些Uniapp WebSocket封装的内容。 一、uniapp提供的WebSocket API方法 1. uni.connectSocket(Object object) 该方法用于连接一台WebSocket服务器。 参数: object 必选 对象 {  url: String,  data: String,  header: Object,  method: String,  success: Function,  fail: Function,  complete: Function } 参数说明: url: 必填,String类型,WebSocket服务器地址; data: 非必填,String/Object/ArrayBuffer类型,需要发送的数据,在WebSocket连接成功后发送; header: 非必填,Object类型,请求头对象; method: 非必填,String类型,HTTP请求方法,必须是大写; success: 非必填,Function类型,连接成功的回调函数; fail: 非必填,Function类型,连接失败的回调函数; complete: 非必填,Function类型,连接结束的回调函数。 2. uni.sendSocketMessage(Object object) 该方法用于向WebSocket服务器发送数据。 参数: object 必选 对象 {  data: String/Object/ArrayBuffer,  success: Function,  fail: Function,  complete: Function } 参数说明: data: 必填,String/Object/ArrayBuffer类型,需要发送的数据; success: 非必填,Function类型,数据发送成功的回调函数; fail: 非必填,Function类型,数据发送失败的回调函数; complete: 非必填,Function类型,数据发送结束的回调函数。 3. uni.closeSocket(Object object) 该方法用于关闭连接到WebSocket服务器的连接。 参数: object 必选 对象 {  code: Number,  reason: String,  success: Function,  fail: Function,  complete: Function } 参数说明: code: 非必填,Number类型,关闭连接的状态码,默认为1000; reason: 非必填,String类型,关闭连接的原因,默认为"normal closure"; success: 非必填,Function类型,关闭连接成功的回调函数; fail: 非必填,Function类型,关闭连接失败的回调函数; complete: 非必填,Function类型,关闭连接结束的回调函数。 4. uni.onSocketOpen(function callback) 该方法用于监听WebSocket连接成功的事件。 参数: callback 必选 回调函数,连接成功后触发的回调函数。 5. uni.onSocketClose(function callback) 该方法用于监听WebSocket连接断开的事件。 参数: callback 必选 回调函数,连接断开后触发的回调函数。 6. uni.onSocketError(function callback) 该方法用于监听WebSocket连接异常的事件。 参数: callback 必选 回调函数,连接错误后触发的回调函数。 7. uni.onSocketMessage(function callback) 该方法用于监听WebSocket服务器发送的消息事件。 参数: callback 必选 回调函数,服务器发送消息后触发的回调函数。 二、第三方库 1. easy-websocket easy-websocket是一个轻量级的uniapp WebSocket库,它可以用来封装WebSocket的请求和监听函数。 使用方法: a. 将easy-websocket库添加为项目依赖: npm install easy-websocket b. 编写WebSocket请求代码: import easyWebsocket from 'easy-websocket' const webSocket = new easyWebSocket({  url: 'wss://echo.websocket.org', }); webSocket.on('open', function() {  console.log('连接成功');  webSocket.send('hello world'); }); webSocket.on('error', function(e) {  console.log('连接出错', e); }); webSocket.on('close', function() {  console.log('连接关闭'); }); webSocket.on('message', function(data) {  console.log('服务器返回数据:', data); }); 2. socket.io socket.io是一个优秀的WebSocket库,它可以在客户端和服务端之间建立实时的、双向的通信。 使用方法: a. 安装socket.io库: npm install socket.io-client b. 编写客户端代码: const socket = io('http://localhost:3000'); socket.on('connect', function() {  console.log('连接成功');  socket.emit('message', 'hello world'); }); socket.on('disconnect', function() {  console.log('连接关闭'); }); socket.on('error', function(e) {  console.log('连接出错', e); }); socket.on('message', function(data) {  console.log('服务器返回数据:', data); }); 在服务端,您需要安装socket.io库并启用它。在Node.js中,您可以使用以下命令安装库: npm install socket.io 然后,您可以编写下面的服务器代码: const io = require('socket.io')(); io.on('connection', function(socket) {  console.log('客户端已连接');  socket.emit('message', '服务器已连接');  socket.on('message', function(data) {    console.log('客户端发送数据:', data);  });  socket.on('disconnect', function() {    console.log('客户端已断开');  }); }); io.listen(3000); 三、总结 Uniapp WebSocket封装可以使用uniapp提供的API方法,也可以使用第三方库,如easy-websocket和socket.io。您可以根据实际情况选择最适合您的方法。无论哪种方法,WebSocket的封装都可以帮助您实现基于WebSocket的应用,实现客户端和服务端的双向通信。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值