关于CTS项目的微信小程序WebSocket开发

关于CTS项目的微信小程序WebSocket开发

1、微信小程序前端

// 引入配置文件config
const urlList = require('../../utils/config.js');

var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // 建立连接
    wx.connectSocket({
      url: 'ws://localhost:8081'
    })

    // 打开连接
    wx.onSocketOpen(function (res) {
      console.log('WebSocket连接已打开!')

      wx.sendSocketMessage({
        data: 'hi, jzh',
      })
    })
    
    // 接收数据
    wx.onSocketMessage(function (res) {
      console.log(res)
    })

    // 关闭连接
    wx.onSocketClose(function (res) {
      console.log('WebSocket连接已关闭!')
    })

    // 连接失败
    wx.onSocketError(function () {
      console.log('WebSocket连接失败!');
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },

  /**
   * 表单递交
   */
  formSubmit: function(e) {
    wx.sendSocketMessage({
      data: 'test'
    });
  }
})

2、后端可选

关于Python和Html5实现WebSocket

关于NodeJs和Html5实现WebSocket

关于Java Tomcat和Html5实现WebSocket

关于C# Fleck和Html5实现WebSocket

3、测试结果

发表回复

您的电子邮箱地址不会被公开。