小程序后台websocket php,微信小程序使用websocket通讯的demo,含前后端代码,亲测可用...

0、概述websocket

(1) 个人总结:后台设置了websocket地址,服务器开启后等待有人去连接它。 一个客户端一打开就去连接websocket地址,同时传递某些识别参数。这样一来后台和客户端连接成功了,然后后台就可以发消息给客户端了,(客户端也可以再回话给后台)。

(2) socket叫套接字,应用程序用socket向网络发出请求或者应答网络请求。

(3) 官方解释的socket 建立连接四步骤:

服务器端开启socket,然后accep方法处于监听状态,等待客户端的连接。

客户端开启,指定服务器名称和端口号来请求连接服务器端的socket。

服务器端收到客户端连接请求,返回连接确认。在服务器端,accept() 方法返回服务器上一个新的 socket 引用,该 socket 连接到客户端的 socket。

客户端收到连接确认,两个人就连接好了,双方开始通讯

(4)注意:

客户端的输出流连接到服务器端的输入流,而客户端的输入流连接到服务器端的输出流。

TCP 是一个双向的通信协议,因此数据可以通过两个数据流在同一时间发送.

1、app.js写法

在app.js下添加三个函数openSocket(), closeSocket(),sendMessage(),在app初始化的onLunch函数里面调用openSocket(),这样子用户一进入小程序就会自动连接websocket

App({

globalData: {

socketStatus: 'closed',

},

onLaunch: function() {

var that = this;

if (that.globalData.socketStatus === 'closed') {

that.openSocket();

}

}

openSocket() {

//打开时的动作

wx.onSocketOpen(() => {

console.log('WebSocket 已连接')

this.globalData.socketStatus = 'connected';

this.sendMessage();

})

//断开时的动作

wx.onSocketClose(() => {

console.log('WebSocket 已断开')

this.globalData.socketStatus = 'closed'

})

//报错时的动作

wx.onSocketError(error => {

console.error('socket error:', error)

})

// 监听服务器推送的消息

wx.onSocketMessage(message => {

//把JSONStr转为JSON

message = message.data.replace(" ", "");

if (typeof message != 'object') {

message = message.replace(/\ufeff/g, ""); //重点

var jj = JSON.parse(message);

message = jj;

}

console.log("【websocket监听到消息】内容如下:");

console.log(message);

})

// 打开信道

wx.connectSocket({

url: "ws://" + "localhost" + ":8888",

})

},

//关闭信道

closeSocket() {

if (this.globalData.socketStatus === 'connected') {

wx.closeSocket({

success: () => {

this.globalData.socketStatus = 'closed'

}

})

}

},

//发送消息函数

sendMessage() {

if (this.globalData.socketStatus === 'connected') {

//自定义的发给后台识别的参数 ,我这里发送的是name

wx.sendSocketMessage({

data: "{\"name\":\"" + wx.getStorageSync('openid') + "\"}"

})

}

},

})

2、后台写法

主要有两个类,一个是websocket启动监听交互类,一个是存储当前所有已经连接好的用户池以及对这些用户的操作封装类

然后在项目启动类里面调用websocke启动监听交互类的启动方法。(如果是springboot项目,就直接在主类中调用)

(1)导入包

org.java-websocket

Java-WebSocket

1.3.0

(2)启动websocket的方法,放在启动类里面

/**

* 启动websocket

*/

public void startWebsocketInstantMsg() {

WebSocketImpl.DEBUG = false;

MyWebScoket s;

s = new MyWebScoket(8888);

s.start();

System.out.println("websocket启动成功");

}

(3)websocket监听交互类如下

该类涉及的监听方法有:监听用户连入;监听用户断开;监听消息发过来;监听有错误等

import com.alibaba.fastjson.JSONObject;

import org.java_websocket.WebSocket;

import org.java_websocket.handshake.ClientHandshake;

import org.java_websocket.server.WebSocketServer;

import java.net.InetSocketAddress;

import java.net.UnknownHostException;

import java.util.Map;

public class MyWebScoket extends WebSocketServer {

public MyWebScoket() throws UnknownHostException {

super();

}

public MyWebScoket(int port) {

super(new InetSocketAddress(port));

}

public MyWebScoket(InetSocketAddress address) {

super(address);

}

@Override

public void onOpen(WebSocket conn, ClientHandshake handshake) {

// ws连接的时候触发的代码,onOpen中我们不做任何操作

}

@Override

public void onClose(WebSocket conn, int code, String reason, boolean remote) {

//断开连接时候触发代码

userLeave(conn);

System.out.println(reason);

}

@Override

public void onMessage(WebSocket conn, String message) {

//有用户连接进来

Map obj = (Map) JSONObject.parse(message);

System.out.println(message);

String username = obj.get("name");

userJoin(conn, username);

}

@Override

public void onError(WebSocket conn, Exception ex) {

//错误时候触发的代码

System.out.println("on error");

ex.printStackTrace();

}

/**

* 去除掉失效的websocket链接

*/

private void userLeave(WebSocket conn){

WsPool.removeUser(conn);

}

/**

* 将websocket加入用户池

* @param conn

* @param userName

*/

private void userJoin(WebSocket conn,String userName){

WsPool.addUser(userName, conn);

}

}

(4)用户池类如下

该类包含的方法有:从池中移除或添加用户;获取当前在线的所有用户;通过参数"name"获取某个用户的当前WebSocket连接;给某个WebSocket连接发送消息;为所有WebSocket连接发送消息等等

import com.td.yousan.util.StringUtils;

import org.java_websocket.WebSocket;

import java.util.*;

public class WsPool {

private static final Map wsUserMap = new HashMap();

/**

* 通过websocket连接获取其对应的用户

*/

public static String getUserByWs(WebSocket conn) {

return wsUserMap.get(conn);

}

/**

* 根据userName获取WebSocket,这是一个list,此处取第一个

* 因为有可能多个websocket对应一个userName(但一般是只有一个,因为在close方法中,我们将失效的websocket连接去除了)

*/

public static WebSocket getWsByUser(String userName) {

Set keySet = wsUserMap.keySet();

synchronized (keySet) {

for (WebSocket conn : keySet) {

String cuser = wsUserMap.get(conn);

if (cuser.equals(userName)) {

return conn;

}

}

}

return null;

}

/**

* 向连接池中添加连接

*/

public static void addUser(String userName, WebSocket conn) {

wsUserMap.put(conn, userName); // 添加连接

}

/**

* 获取所有连接池中的用户,因为set是不允许重复的,所以可以得到无重复的user数组

*/

public static Collection getOnlineUser() {

List setUsers = new ArrayList();

Collection setUser = wsUserMap.values();

for (String u : setUser) {

setUsers.add(u);

}

return setUsers;

}

/**

* 移除连接池中的连接

*/

public static boolean removeUser(WebSocket conn) {

if (wsUserMap.containsKey(conn)) {

wsUserMap.remove(conn); // 移除连接

return true;

} else {

return false;

}

}

/**

* 向特定的用户发送数据

*/

public static void sendMessageToUser(WebSocket conn, String message) {

if (null != conn && null != wsUserMap.get(conn)) {

conn.send(message);

}

}

/**

* 向所有用户名中包含某个特征得用户发送消息

*/

public static void sendMessageToSpecialUser(String message,String special) {

Set keySet = wsUserMap.keySet();

if (special == null) {

special = "";

}

synchronized (keySet) {

for (WebSocket conn:keySet) {

String user = wsUserMap.get(conn);

try {

if (user != null) {

String [] cus = user.split("_");

if (!StringUtils.isNullOrEmpty(cus[0])) {

String cusDot = "," + cus[0] + ",";

if (cusDot.contains(","+special+",")) {

conn.send(message);

}

}else {

conn.send(message);

}

}

}catch (Exception e) {

e.printStackTrace();

//wsUserMap.remove(conn);

}

}

}

}

/**

* 向所有的用户发送消息

*/

public static void sendMessageToAll(String message) {

Set keySet = wsUserMap.keySet();

synchronized (keySet) {

for (WebSocket conn : keySet) {

String user = wsUserMap.get(conn);

if (user != null) {

conn.send(message);

}

}

}

}

}

总结

以上所述是小编给大家介绍的微信小程序使用websocket通讯的demo,含前后端代码,亲测可用,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的微信小程序使用`wx.onSocketOpen`的示例代码: ```javascript Page({ data: { socketMsg: '', socketOpen: false }, onLoad: function () { // 打开WebSocket连接 wx.connectSocket({ url: 'wss://example.com/socket', success: () => { console.log('WebSocket连接成功') } }) // 监听WebSocket连接打开事件 wx.onSocketOpen(() => { console.log('WebSocket连接已打开') this.setData({ socketOpen: true }) }) // 监听WebSocket接收到服务器的消息事件 wx.onSocketMessage((res) => { console.log('收到服务器消息:', res.data) this.setData({ socketMsg: res.data }) }) // 监听WebSocket错误事件 wx.onSocketError((res) => { console.error('WebSocket连接错误:', res) }) // 监听WebSocket关闭事件 wx.onSocketClose(() => { console.log('WebSocket连接已关闭') this.setData({ socketOpen: false }) }) }, // 发送消息给服务器 sendMsg: function () { if (this.data.socketOpen) { wx.sendSocketMessage({ data: 'Hello, WebSocket!' }) } else { wx.showToast({ title: 'WebSocket未连接', icon: 'none' }) } } }) ``` 在这个示例代码中,我们使用`wx.connectSocket`打开一个WebSocket连接,并在成功连接后,使用`wx.onSocketOpen`监听WebSocket连接打开事件。当WebSocket连接打开时,我们将`socketOpen`数据设置为`true`。 在接下来的代码中,我们使用`wx.onSocketMessage`监听WebSocket接收到服务器的消息事件,并将接收到的消息通过`setData`方法保存到`socketMsg`数据中。 当WebSocket连接发生错误时,我们使用`wx.onSocketError`监听错误事件,并在控制台输出错误信息。 最后,我们使用`wx.onSocketClose`监听WebSocket关闭事件,并将`socketOpen`数据设置为`false`。 除此之外,在这个示例代码中还包了一个`sendMsg`方法,用于发送消息给服务器。在点击发送按钮时,我们通过判断`socketOpen`数据的值来确定WebSocket是否已连接。如果已连接,我们使用`wx.sendSocketMessage`方法发送一条消息。如果未连接,我们使用`wx.showToast`方法显示一个提示信息。 希望这个示例代码能够帮助你理解如何在微信小程序使用`wx.onSocketOpen`。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值