微信小程序使用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)导入包
<dependency>
    <groupId>org.java-websocket</groupId>
    <artifactId>Java-WebSocket</artifactId>
    <version>1.3.0</version>
</dependency>
(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<String, String> obj =  (Map<String,String>) 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<WebSocket, String> wsUserMap = new HashMap<WebSocket, String>();
    /**
     * 通过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<WebSocket> 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<String> getOnlineUser() {
        List<String> setUsers = new ArrayList<String>();
        Collection<String> 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<WebSocket> 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<WebSocket> keySet = wsUserMap.keySet();
        synchronized (keySet) {
            for (WebSocket conn : keySet) {
                String user = wsUserMap.get(conn);
                if (user != null) {
                    conn.send(message);
                }
            }
        }
    }
}
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用的更多相关文章
- 微信小程序图片上传java后台(前后端代码)
		小程序代码 upload:function(e){ var that = this; wx.showActionSheet({ itemList: ['从相册选择','拍照'], itemColor: ... 
- 微信小程序之WebSocket
		本文版权归 OSChina jsongo0 所有,转载请标明出处,以示尊重! 原文:https://my.oschina.net/jsongo/blog/757871 为什么需要websocket?传 ... 
- PHP小程序后端支付代码亲测可用
		小程序后端支付代码亲测可用 <?php namespace Home\Controller; use Think\Controller; class WechatpayController ex ... 
- 微信小程序之最简单的Demo设计使用
		这个小Demo,代码量不多:导航样式.View.Text.点击.JS交互的使用,主要是理解每个后缀文件的功能,然后才能更好的使用开发.......(下面代码和源代码没差别,实在想要的请留言,谢谢... ... 
- 微信小程序开发——websocket测试
		服务端 在windows下执行 node server.js 也可参照我的前一篇部署https var httpServ = require('http') var WebSocketServer ... 
- 微信小程序和微信小程序之间的跳转和传参示例代码附讲解
		一:微信小程序跳转 使用限制 需要用户触发跳转 从 2.3.0 版本开始,若用户未点击小程序页面任意位置,则开发者将无法调用此接口自动跳转至其他小程序. 需要用户确认跳转 从 2.3.0 版本开始,在 ... 
- GitHub Top 微信小程序——在家中憋了几天写点代码吧
		GitHub Top 本项目为 GitHub 热点项目微信小程序客户端,首页仅推荐一个热点项目,这个项目往往是社会热门事件所催生的一个项目,如 996.ICU.wuhan2020,所推荐项目标准为:积 ... 
- 基于vs2015 SignalR开发的微信小程序使用websocket实现聊天功能
		一)前言 在微信小程上实现聊天功能,大致有三种方式:1)小程序云开发 2)购买第三方IM服务 3)使用自己的服务器自己开发. 这里重要讲使用自己的服务器自己开发,并且是基于vs的开发. 网上提供的解决 ... 
- 微信小程序之支付密码输入demo
		在小程序中实现支付密码的输入,要解决几个问题: 1.小程序要想唤起键盘,必须要借助input控件.通过input控件和其属性focus来唤起和隐藏输入键盘. 2.要让input控件不可见.让光标和输入 ... 
随机推荐
- [b0039] python 归纳 (二四)_多进程数据共享和同步_锁Lock&RLock
			# -*- coding: utf-8 -*- """ 多进程 锁使用 逻辑: 10个进程各种睡眠2秒,然后打印. 不加锁同时打印出来,总共2秒,加锁一个接一个打印,总共 ... 
- Python—系统模块(os和sys)
			os模块 https://www.cnblogs.com/feifeifeisir/p/9519282.html sys模块 获取Python版本信息 import sys a = sys.versi ... 
- Linux MySQL 开启远程访问
			进入mysql以后 use mysql; GRANT ALL ON *.* TO user@'%' IDENTIFIED BY '123456' WITH GRANT OPTION; 
- HTTP GET POST PUT DELETE 四种请求
			1.GET请求会向数据库发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询一下数据,不会修改.增加数据,不会影响资源的内容,即该请求不会产生副作用.无论进行多少次操 ... 
- Metrics、Tracing、Logging的融合
			终极目标 OpenTelemetry的终态就是实现Metrics.Tracing.Logging的融合,作为CNCF可观察性的终极解决方案. Tracing:提供了一个请求从接收到处理完毕整个生命周期 ... 
- Jmeter Question 之“集成Ant+Jenkins自动化”
			首先介绍一下Ant.Apache Ant,是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发.由Apache软件基金会所提供. 是的.还是Apache家 ... 
- 8.Go-Reader,Writer和ioutil
			8.1.Reader (1)输入流 流是应用程序和外部资源进行数据交互的纽带 流分为输入流和输出流,输入和输出都是相对于程序,把外部数据传入程序中叫做输入流,反之叫做输出流 在Go语言标准库中io包下 ... 
- CF-1238 C.Standard Free2play
			题目大意: 有一个墙,高度为h,在每一个高度处都有一个踏板,有的踏板是隐藏着的,有的是伸出来的,小人站在h高度处(题目保证h高度处的踏板一定是伸出来的),这个小人每站到一个踏板上,就可以点一个开关,将 ... 
- django restful framework教程大全
			一. 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角 ... 
- 阿里云cdn缓存设置技巧,不同文件结尾用不同的缓存时间
			https://edu.aliyun.com/lesson_130_1505?spm=5176.10731542.0.0.2ed37dbf42YL6U#_1505 
