微信小程序 websocket 实现SpringMVC+Spring+Mybatis


Posted in Javascript onAugust 04, 2017

微信小程序实现websocket步骤:

后台:

1. 添加maven依赖
 2. 创建握手
 3. 创建处理器
 4. spring配置(xml配置或javabean方式配置任选一种)

微信小程序:

1. 书写连接

java后台

1.添加maven依赖

<!-- websocket -->
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-websocket</artifactId>
    <version>${spring.version}</version>
  </dependency>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-messaging</artifactId>
    <version>${spring.version}</version>
  </dependency>

  <!-- 其中spring版本 -->
  <!-- 注意spring版本一定要为4以上版本 -->
  <spring.version>4.3.7.RELEASE</spring.version>

2.创建握手

package com.ahutshop.websocket;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;

/**
 * 此类用来获取登录用户信息并交由websocket管理
 */
public class MyWebSocketInterceptor implements HandshakeInterceptor {

  @Override
  public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse arg1, WebSocketHandler arg2,
      Map<String, Object> arg3) throws Exception {
    // 将ServerHttpRequest转换成request请求相关的类,用来获取request域中的用户信息
    if (request instanceof ServletServerHttpRequest) {
      ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request;
      HttpServletRequest httpRequest = servletRequest.getServletRequest();

    }

    System.out.println("连接到我了");

    return true;
  }

  @Override
  public void afterHandshake(ServerHttpRequest arg0, ServerHttpResponse arg1, WebSocketHandler arg2, Exception arg3) {
    // TODO Auto-generated method stub

  }

}

3.创建处理器

package com.ahutshop.websocket;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.WebSocketMessage;
import org.springframework.web.socket.WebSocketSession;

public class WebSocketPushHandler implements WebSocketHandler {
  private static final List<WebSocketSession> users = new ArrayList<>();

  // 用户进入系统监听
  @Override
  public void afterConnectionEstablished(WebSocketSession session) throws Exception {
    System.out.println("成功进入了系统。。。");
    users.add(session);

    sendMessagesToUsers(new TextMessage("今天晚上服务器维护,请注意"));
  }

  //
  @Override
  public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
    // 将消息进行转化,因为是消息是json数据,可能里面包含了发送给某个人的信息,所以需要用json相关的工具类处理之后再封装成TextMessage,
    // 我这儿并没有做处理,消息的封装格式一般有{from:xxxx,to:xxxxx,msg:xxxxx},来自哪里,发送给谁,什么消息等等
    // TextMessage msg = (TextMessage)message.getPayload();
    // 给所有用户群发消息
    //sendMessagesToUsers(msg);
    // 给指定用户群发消息
    //sendMessageToUser(userId, msg);

  }

  // 后台错误信息处理方法
  @Override
  public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {

  }

  // 用户退出后的处理,不如退出之后,要将用户信息从websocket的session中remove掉,这样用户就处于离线状态了,也不会占用系统资源
  @Override
  public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
    if (session.isOpen()) {
      session.close();
    }
    users.remove(session);
    System.out.println("安全退出了系统");

  }

  @Override
  public boolean supportsPartialMessages() {
    return false;
  }

  /**
   * 给所有的用户发送消息
   */
  public void sendMessagesToUsers(TextMessage message) {
    for (WebSocketSession user : users) {
      try {
        // isOpen()在线就发送
        if (user.isOpen()) {
          user.sendMessage(message);
        }
      } catch (IOException e) {
        e.printStackTrace();
      }
    }
  }

  /**
   * 发送消息给指定的用户
   */
  public void sendMessageToUser(String userId, TextMessage message) {
    for (WebSocketSession user : users) {
      if (user.getAttributes().get("").equals(userId)) {
        try {
          // isOpen()在线就发送
          if (user.isOpen()) {
            user.sendMessage(message);
          }
        } catch (IOException e) {
          e.printStackTrace();
        }
      }
    }
  }
}

4.spring配置

javabean方式配置(推荐)

package com.ahutshop.websocket;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {
  @Override
  public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {

    registry.addHandler(WebSocketPushHandler(), "/webSocketServer.action").addInterceptors(new MyWebSocketInterceptor()).setAllowedOrigins("*");
    registry.addHandler(WebSocketPushHandler(), "/sockjs/webSocketServer.action")
        .addInterceptors(new MyWebSocketInterceptor()).withSockJS();
  }

  @Bean
  public WebSocketHandler WebSocketPushHandler() {
    return new WebSocketPushHandler();
  }

}

spring.xml中配置扫描包
<!-- 扫描包 -->
<context:component-scan base-package="com.ahutshop.websocket" />

注意:

1. /webSocketServer.action之所以要加上.action的后缀,是因为web.xmlk中配置了拦截的后缀名为.action

<!-- springmvc模块 -->
<servlet>
  <servlet-name>DispatcherServlet</servlet-name>
  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  <init-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:springmvc.xml</param-value>
  </init-param>
  <load-on-startup>1</load-on-startup>
  <!-- 支持异步 -->
  <async-supported>true</async-supported>
</servlet>
<servlet-mapping>
  <servlet-name>DispatcherServlet</servlet-name>
  <url-pattern>*.action</url-pattern> 
</servlet-mapping>

2 .setAllowedOrigins(“*”)中的*代表合法的请求域名,该方法接受一个可变数组作为参数,一定要配置,不然会请求时会出现403

xml方式配置(省略)

微信小程序

1.websocket.wxml

<!--pages/websocket/websocket.wxml-->
<view class="page">
 <view class="page__hd">
 </view>
 <view class="page__bd">

 <button bindtap="connectWebsocket" type="primary">连接websocket</button>

 </view>
</view>

2.websocket.js

// pages/websocket/websocket.js
Page({

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

 },
 connectWebsocket: function () {
  wx.connectSocket({
   url: 'ws://localhost:8080/AhutShop/webSocketServer.action',
   data: {
   },
   header: {
    'content-type': 'application/json'
   },
   method: "GET"
  })
  wx.onSocketOpen(function (res) {
   console.log('WebSocket连接已打开!')
  })
  wx.onSocketError(function (res) {
   console.log('WebSocket连接打开失败,请检查!')
  })
  wx.onSocketMessage(function (res) {
   console.log('收到服务器内容:' + res.data)
  })
 }
})

运行效果

微信小程序 websocket 实现SpringMVC+Spring+Mybatis

以上就是微信小程序 后台的建立,如有疑问请留言或者到本站社区交流讨论,本站关于微信小程序的文章还有很多,希望大家多多搜索查阅,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 Javascript
Angular实现响应式表单
Aug 04 #Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 #Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 #jQuery
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 #Javascript
js模拟百度模糊搜索的实例
Aug 04 #Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 #Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 #Javascript
You might like
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
JavaScript使用cookie
2007/02/02 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
通过代码实例了解Python异常本质
2020/09/16 Python
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
给面试官的感谢信
2014/02/01 职场文书
简历上的自我评价
2014/02/03 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
召开会议通知范文
2015/04/15 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
暑期辅导班宣传单
2015/07/14 职场文书