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


Posted in Javascript onMay 22, 2019

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,含前后端代码,亲测可用,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
jQuery 相关控件的事件操作分解
Aug 03 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 #Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 #Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 #Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 #Javascript
JavaScript中的 new 命令
May 22 #Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 #Javascript
原生JS实现列表内容自动向上滚动效果
May 22 #Javascript
You might like
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
Django配置跨域并开发测试接口
2020/11/04 Python
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
美工的岗位职责
2013/11/14 职场文书
小学班主任培训方案
2014/06/04 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
开网店计划分析
2019/07/30 职场文书
创业计划书之面包店
2019/09/12 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
vue+iview实现手机号分段输入框
2022/03/25 Vue.js