微信小程序实现websocket聊天室

在微信小程序中建立聊天室。

目录

一、在web项目中导入javax.websocket-api-1.0-rc4.jar包

二、编写支持websocket的controller类

三、在微信小程序中编写JavaScript代码

---

web服务器环境：

1、 myeclipse

2、 jdk1.7

3、 tomcat8 (使用tomcat7可能出现其他问题)

4、 在WEB-INF/lib中添加javax.websocket-api-1.0-rc4.jar(使用tomcat7可能会与tomcat自带的websocket包冲突！)

前端：

1、微信小程序

一、在web项目中导入javax.websocket-api-1.0-rc4.jar包

将javax.websocket-api-1.0-rc4.jar添加到/WebRoot/WEB-INF/lib中，并build path。

二、编写支持websocket的controller类

package com.dxw.wx.controller;

import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
 
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
 
/*该controller用于微信聊天室*/

/**
 * @ServerEndpoint 定义当前类为websocket服务器端口,参数是访问的路径
 */
@ServerEndpoint("/websocket")
public class WX_WebSocketController {
 
	// 记录当前在线人数
	private static int onlineCount = 0;
	// CopyOnWriteArraySet是安全的set集合，用来存放客户端的每个websocket对象
	private static CopyOnWriteArraySet<WX_WebSocketController> set = new CopyOnWriteArraySet<WX_WebSocketController>();
	// 与客户端的连接会话
	private Session session;
	// 返回的信息
	private String message;
	// 当前用户的线程名字
	private String username;
 
	/**
	 * 连接建立成功调用的方法
	 * @param session  可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
	 */
	@OnOpen
	public void onOpen(Session session) throws IOException {
		// 初始化session
		this.session = session;
		// 将当前session添加到set集合中
		set.add(this);				
		// 在线人数加1
		onlineCount++;
		// 修改当前线程的名字
		Thread.currentThread().setName("用户" + onlineCount);
		// 获取当前线程的名字
		username = Thread.currentThread().getName();
		// 编写返回的信息
		message = username + "登录成功，当前在线人数为：" + onlineCount + "人";
		// 群发消息
		for (WX_WebSocketController websocketTomcat : set) {
			websocketTomcat.session.getBasicRemote().sendText(message);
		}
	}
 
	/**
	 * 连接关闭调用的方法
	 */
	@OnClose
	public void onClose() throws IOException {
		// 将当前session从set集合中移除
		set.remove(this);
		// 在线人数减1
		onlineCount--;
		// 编写返回的信息
		message = username + "下线成功,当前在线人数为：" + onlineCount + "人";
		// 判断set集合中是否还有websocket对象
		if (set.size() > 0) {
			// 群发消息
			for (WX_WebSocketController websocketTomcat : set) {
				websocketTomcat.session.getBasicRemote().sendText(message);
			}
		}
	}
 
	/**
	 * 连接关闭调用的方法
	 */
	@OnError
	public void onError(Throwable error) {
		error.printStackTrace();
	}
 
	/**
	 * 收到客户端消息后调用的方法
	 * @param message 客户端发送过来的消息
	 * @param session 可选的参数
	 */
	@OnMessage
	public void onMessage(String message) throws IOException {
		// 群发消息
		for (WX_WebSocketController websocketTomcat : set) {
			websocketTomcat.session.getBasicRemote().sendText(message);
		}
	}
}

三、在微信小程序中编写JavaScript代码

在此为一个工具类，接收两个参数，第一个参数：用户信息，第二个参数：回调函数（一般用于页面显示）

注意：url中为“wss://服务器域名/项目名/controller注解路径”。

注意：微信小程序只支持wss(对应https)协议，不支持ws(对应http)协议！

注意：url使用的服务器域名需要在微信公众平台中配置！！！（如下图处）

// 聊天室
//在此web服务器环境为：
        // jdk1.7
        // tomcat8 (使用tomcat7可能出现其他问题)
        // 在WEB-INF/lib中添加javax.websocket-api-1.0-rc4.jar(使用tomcat7可能会与tomcat自带的websocket包冲突！)

var url = 'wss://duxuewu.xyz:8080/SeatReservation/websocket'; //根据需要更改！！

function connect(user,func) {
  wx.connectSocket({
    url: url,
    header:{'content-type': 'application/json'},
    success: function () {
      console.log('信道连接成功~')
    },
    fail: function () {
      console.log('信道连接失败~')
    } 
  });
  wx.onSocketOpen(function (res) {
     wx.showToast({
       title: '信道已开通~',
       icon: "success", 
       duration: 2000
     })
     //接受服务器消息
     wx.onSocketMessage(func);//func回调可以拿到服务器返回的数据
  });
  wx.onSocketError(function (res) {
    wx.showToast({
      title: '信道连接失败，请检查！',
      icon: "none",
      duration: 2000
    })
  })  
}
//发送消息
function send(msg) {
  wx.sendSocketMessage({ 
    data: msg 
  });
}
module.exports = {
  connect: connect,
  send: send
}