How to implement front-end and back-end communication in UniApp

In mobile application development, front-end and back-end communication is essential. It allows the application to have more functions and interactivity, and users can get the information they need in real time. As a framework that provides cross-platform development capabilities, UniApp also supports front-end and back-end communication. This article will introduce how to implement front-end and back-end communication in UniApp.

1. Introduce encapsulated ajax

UniApp has built-in encapsulated ajax request method, which can be introduced directly when using front and backend communication. The specific code is as follows:

import {ajax} from '@/common/ajax.js';

ajax({
  url: 'https://www.example.com/api/example',
  method: 'GET',
  data: {
    exampleParam: 'exampleValue'
  },
  success: res => {
    console.log(res);
  },
  fail: err => {
    console.log(err);
  }
})

When requesting, you need to fill in the request path and request method, and fill in the parameters required for the request in the data field. At the same time, callback functions after request success and failure must also be defined in the request configuration.

2. Use uni.request

UniApp also provides the uni.request method to initiate Http requests, which is basically the same as the use of ajax. The code is as follows:

uni.request({
  url: 'https://www.example.com/api/example',
  method: 'GET',
  data: {
    exampleParam: 'exampleValue'
  },
  success: res => {
    console.log(res);
  },
  fail: err => {
    console.log(err);
  }
})

The difference is that in addition to supporting ordinary http requests, uni.request also supports the WebSocket protocol, which can be used for two-way instant communication with the server.

3. Use WebSocket

To achieve two-way communication, you can use the WebSocket protocol. Using WebSocket requires establishing a connection and sending and receiving messages through the connection object. The sample code is as follows:

let socket = null;

function createSocket() {
  socket = new WebSocket('wss://www.example.com/ws');
  socket.onopen = event => {
    console.log('WebSocket connected.');
  };
  socket.onmessage = event => {
    console.log('WebSocket message received:', event.data);
  };
  socket.onclose = event => {
    console.log('WebSocket disconnected, code:', event.code);
  };
  socket.onerror = event => {
    console.error('WebSocket error:', event.error);
  };
  
  return socket;
}

function closeSocket() {
  if (socket) {
    socket.close();
    socket = null;
  }
}

function sendMsg(msg) {
  if (!socket) {
    createSocket();
  } else if (socket.readyState === WebSocket.CLOSED) {
    createSocket();
  }
  
  socket.send(msg);
}

4. Using uni-socket.io

UniApp also provides a Socket.io client plug-in uni-socket.io suitable for uni-app, which can Simplify our interaction with WebSocket. We can install and use it directly through npm in uni-app.

Installation:

npm install uni-socket.io

Usage:

import io from 'uni-socket.io';

let socket = null;

function createSocket() {
  socket = io('wss://www.example.com/ws');
  socket.on('connect', () => {
    console.log('Socket.io connected.');
  });
  socket.on('message', msg => {
    console.log('Socket.io message received:', msg);
  });
  socket.on('disconnect', () => {
    console.log('Socket.io disconnected.');
  });
  socket.on('error', error => {
    console.error('Socket.io error:', error);
  });
  
  return socket;
}

function closeSocket() {
  if (socket) {
    socket.close();
    socket = null;
  }
}

function sendMsg(msg) {
  if (!socket) {
    createSocket();
  } else if (socket.disconnected) {
    createSocket();
  }
  
  socket.send(msg);
}

Using uni-socket.io, we can create a WebSocket connection directly through the io() function, and also implement event management, Authentication and other functions.

To sum up, UniApp provides a variety of ways to achieve front-end and back-end communication, and developers can choose a method that suits them based on actual needs. No matter which method is used, we can make our application have a better user experience while improving the interactivity and usefulness of the application.

The above is the detailed content of How to implement front-end and back-end communication in UniApp. For more information, please follow other related articles on the PHP Chinese website!