微信小程序實現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
}