微信小程序第五弹 websocket使用 +java后台代码

话不多说，直接看代码（开发工具今天做了很大的更新，界面变化较多，但是更好用了）

这是我的page页面

Paste_Image.png

界面效果如下

Paste_Image.png

主要是，客户端发送一条记录，服务器端回复一条相同的记录，样子很丑，捂脸。

以下是代码
-------小程序前台
Js文件

// websocket.js

Page({
  data: {
    send: [],
    receive: [],
  },

  onLoad: function (options) {
    
    var that=this;
    console.log(this);
   var receivetemp = this.data.receive;
    //建立连接
    wx.connectSocket({
      url: "ws://127.0.0.1:8080/smallpragram/websocket",
    })

    //连接成功
    wx.onSocketOpen(function () {
      wx.sendSocketMessage({
        data: 'stock',
      })
    })

    //接收数据
    wx.onSocketMessage(function (data) {
      console.log(data);
      console.log("客户端回复的消息" + data.data);
      receivetemp.push(data.data);
      that.setData({
        receive: receivetemp
      })
    })

    //连接失败
    wx.onSocketError(function () {
      console.log('websocket连接失败！');
    })
  },
  sendMessage: function (e) {
    console.log(e);
    var sendtemp=this.data.send;
    sendtemp.push(' 发送的消息：'+e.detail.value.message);
    this.setData({
      send: sendtemp
    })
    console.info(this.data.receive);
    wx.sendSocketMessage({
      data: e.detail.value.message
    })
  }
})

Wxml文件（不是很会写样式，就是加了个颜色区分一下，本来想弄成两列，太难弄了）

<!--websocket.wxml-->
<text>websocket.wxml</text>
<view class="classname">
    <form bindsubmit="sendMessage" bindreset="formReset">
        <view class="classname">
            <input name="message" bindinput="valuechange" id="textvalue" style="background-color:#fcf7fc" value="{{message}}">
            </input>
            <button size="mini" formType="submit">send</button>
        </view>
    </form>
    <view class="listclass">
        <!-- 发送的信息 -->
        <!-- <span>发送的消息</span> -->
        <view wx:for="{{send}}" class="flex-item bc_green" wx:for-item="i" >
          <text  class="item">  {{i}} </text>          
        </view>
        <!-- 接收的信息 -->
        <!-- <span>接收的消息</span> -->
        <view wx:for="{{receive}}" class="flex-item bc_red" wx:for-item="j">
          <text class="item">  {{j}} </text>
        </view>
    </view>
</view>

Wxss文件

/* websocket.wxss */

.flex-item{
  display: inline-block;
  /* height: 100px; */
  word-break:break-all;
}

.bc_red{
  background-color: red;
}

.bc_green{
  background-color: greenyellow;
}

-----------Java后台

主要参考博客 http://www.cnblogs.com/xdp-gacl/p/5193279.html
很喜欢这位大神的博客，写的很详细，赞，学习到很多东西
Java类遇到的问题：使用tomcat8+jdk7成功，使用tomcat7是失败的，发布时需注意

import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;

/**
 * @ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端,
 * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
 */
@ServerEndpoint("/websocket")
public class WebSocketTest {
    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;

    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
    private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>();

    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    /**
     * 连接建立成功调用的方法
     * @param session  可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
     */
    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        webSocketSet.add(this);     //加入set中
        addOnlineCount();           //在线数加1
        System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
        try{
            sendMessage("进入消息队列");
        }catch(Exception e){
            e.printStackTrace();
        }
      
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(){
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1
        System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     * @param message 客户端发送过来的消息
     * @param session 可选的参数
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("来自客户端的消息:" + message);
        //群发消息
        for(WebSocketTest item: webSocketSet){
            try {
                if(message.equals("你好")){
                    item.sendMessage(" 回复的消息:"+"你好，请问？");
                    continue;
                }
//                item.sendMessage(message);
                item.sendMessage(" 回复的消息:"+message);
            } catch (IOException e) {
                e.printStackTrace();
                continue;
            }
        }
    }

    /**
     * 发生错误时调用
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error){
        System.out.println("发生错误");
        error.printStackTrace();
    }

    /**
     * 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。
     * @param message
     * @throws IOException
     */
    public void sendMessage(String message) throws IOException{
//        this.session.getBasicRemote().sendText(message);//阻塞式发送消息
        this.session.getAsyncRemote().sendText(message);//非阻塞制发送消息
    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    public static synchronized void addOnlineCount() {
        WebSocketTest.onlineCount++;
    }

    public static synchronized void subOnlineCount() {
        WebSocketTest.onlineCount--;
    }
}

以上，结束。