微信小程序与golang后端实现websocket通讯

本文详细介绍了如何使用Gin-Gonic框架实现实时后端WebSocket服务,并在微信小程序中通过WebSocket.js建立连接,进行数据传输的全过程。
摘要由CSDN通过智能技术生成

话不多说,直接上运行结果

后端:

前端:

上代码:

首先运行后端代码:

package main

import (
	"github.com/gin-gonic/gin"
	"github.com/gorilla/websocket"
	"log"
	"net/http"
)

var upgrader = websocket.Upgrader{
	ReadBufferSize:  1024,
	WriteBufferSize: 1024,
	CheckOrigin: func(r *http.Request) bool {
		return true
	},
}

func handleWebSocket(c *gin.Context) {
	conn, err := upgrader.Upgrade(c.Writer, c.Request, nil)
	if err != nil {
		log.Println("Failed to upgrade connection:", err)
		return
	}
	defer conn.Close()

	for {
		_, message, err := conn.ReadMessage()
		if err != nil {
			if websocket.IsUnexpectedCloseError(err, websocket.CloseGoingAway, websocket.CloseAbnormalClosure) {
				log.Printf("Connection closed with error code: %d", err)
			}
			break
		}
		log.Printf("Received message: %s", message)

		// 返回固定的消息 "true" 给客户端
		if err := conn.WriteMessage(websocket.TextMessage, []byte("true")); err != nil {
			log.Println("Failed to write message:", err)
			break
		}
	}
}

func main() {
	r := gin.Default()
	r.GET("/ws", handleWebSocket)
	log.Println("Starting server on :8081")
	err := r.Run(":8081")
	if err != nil {
		log.Fatal("ListenAndServe: ", err)
	}
}

然后在微信小程序中:在utils文件夹中新建一个websocket.js文件:

// websocket.js

// 定义WebSocket连接函数,接受一个对象参数,其中包含了WebSocket连接的配置信息以及要发送的消息
function connectWebSocket(params) {
    let socket = wx.connectSocket({
        url: params.url, // 使用传入的url
        header: params.header // 使用传入的header
    });

    // 监听WebSocket连接打开事件
    socket.onOpen(() => {
        console.log('WebSocket连接已打开');
        // 连接打开后发送消息
        sendMessage(socket, params.message);
    });

    // 监听WebSocket接收到服务器的消息事件
    socket.onMessage((message) => {
        let receivedMsg = JSON.parse(message.data);
        // 在这里处理接收到的消息
        console.log('接收到的消息:', receivedMsg);
    });

    // 监听WebSocket错误事件
    socket.onError((error) => {
        console.error('WebSocket错误:', error);
    });

    // 监听WebSocket关闭事件
    socket.onClose((res) => {
        console.log('WebSocket 连接已关闭', res);
    });

    return socket;
}

// 定义发送消息函数
function sendMessage(socket, msg) {
    if (socket && socket.OPEN === 1) {
        // 编码要发送的消息
        let encodedMsg = JSON.stringify(msg);
        socket.send({
            data: encodedMsg, // 使用编码后的消息
            success: () => console.log('消息发送成功'),
            fail: (error) => console.error('消息发送失败', error)
        });
    } else {
        console.log('WebSocket连接未打开');
    }
}

// 导出函数,使其它文件可以引用
module.exports = {
    connectWebSocket: connectWebSocket
};

接着调用这个文件:



Page({
  onLoad: function() {
    // 引入websocket.js文件
    const WebSocketUtil = require('../../../utils/websocket.js');

// 定义包含WebSocket连接配置信息以及要发送的消息的对象
let params = {
    url: 'ws://localhost:8081/ws',
    header: {
        'content-type': 'text'
    },
    message: {
        message1: '这是第一条消息',
        message2: '这是第二条消息',
        message3: '这是第三条消息'
    }
};

// 调用WebSocket连接函数,传入对象参数
WebSocketUtil.connectWebSocket(params);
  },

  // 其他页面逻辑...
});

  • 8
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值