电子商务网站建设的过程,温州建设工程网站,vs 网站开发,wordpress主题开发博客文章目录 一、概述#xff1a;二、配置#xff1a;1. 后端配置2. uni-app(app端)3. 使用 一、概述#xff1a;
websocket 协议是在http 协议的基础上的升级#xff0c;通过一次http 请求建立长连接#xff0c;转而变为TCP 的全双工通信#xff1b;而http 协议是一问一答… 文章目录 一、概述二、配置1. 后端配置2. uni-app(app端)3. 使用 一、概述
websocket 协议是在http 协议的基础上的升级通过一次http 请求建立长连接转而变为TCP 的全双工通信而http 协议是一问一答的请求方式方式。
二、配置
1. 后端配置
Configuration
EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer{Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {//注册STOMP协议的节点(endpoint),并映射指定的url//注册一个STOMP的endpoint,并指定使用SockJS协议// 此处配置支持PC 端浏览器客户端访问采用http registry.addEndpoint(/websocket).setAllowedOriginPatterns(*).withSockJS();// 此处配置支持uniapp app 端打包,不要带withSockJS 客户端访问 采用ws 协议registry.addEndpoint(/websocket-app).setAllowedOriginPatterns(*);}Overridepublic void configureMessageBroker(MessageBrokerRegistry registry) {//配置消息代理(Message Broker)//广播式应配置一个/topic消息代理registry.enableSimpleBroker(/topic);}
}
2. uni-app(app端)
websocket-uni.js
let socketOpen false;
let socketMsgQueue [];
import http from /common/Http.vue;export default {client: null,baseURL: ws://192.168.1.1:9109/websocket-app,//uni-app使用时不能使用http不然监听不到需要使用wsinit(headers) {if (this.client) {return Promise.resolve(this.client);}return new Promise((resolve, reject) {const ws {send: this.sendMessage,onopen: null,onmessage: null,close: this.closeSocket,};uni.connectSocket({url: this.baseURL,header: headers,success: function() {console.log(WebSocket连接成功);}});uni.onSocketOpen(function(res) {console.log(WebSocket连接已打开, res);socketOpen true;for (let i 0; i socketMsgQueue.length; i) {ws.send(socketMsgQueue[i]);}socketMsgQueue [];ws.onopen ws.onopen();});uni.onSocketMessage(function(res) {console.log(回馈)ws.onmessage ws.onmessage(res);});uni.onSocketError(function(res) {console.log(WebSocket 错误, res);});uni.onSocketClose((res) {this.client.disconnect();this.client null;socketOpen false;console.log(WebSocket 已关闭, res);});const Stomp require(./stomp.js).Stomp;Stomp.setInterval function(interval, f) {return setInterval(f, interval);};Stomp.clearInterval function(id) {return clearInterval(id);};const client this.client Stomp.over(ws);client.connect(headers, function() {console.log(stomp connected);resolve(client);});});},disconnect() {uni.closeSocket();},sendMessage(message) {if (socketOpen) {uni.sendSocketMessage({data: message,});} else {socketMsgQueue.push(message);}},closeSocket() {console.log(closeSocket);},
};
3. 使用 import WebSocket from /components/js/websocket-uni1.js;if (self.map.get(token)) {//需要上传tokenheaders.Authorization self.map.get(token);}WebSocket.init(headers).then(client {//接收反馈端口成功方法错误方法client.subscribe(/topic/getResponse, this.responseCallback, this.onFailed);});responseCallback: function(frame) {let selfthis;let body JSON.parse(frame.body);uni.showToast({icon:success,icon: none,position:center,title:消息您有一个新的消息请注意接收},2000)},onFailed: function(frame) {//this.$notify.error({// title: 系统错误,// message: 消息服务连接失败!,//});console.log(STOMP: frame);},
