这个代码是用webScoket写的即时聊天通讯的,功能可群发单发,可对不在线用户发送消息时用户一上线立马就能收到消息,也可以查看未读数量,这个代码写了有一段时间了,忽然想起来就想着发上来记一下和交流一下
欢迎大家指教,如果有什么不对的地方欢迎指出,共同进步
也可以去直接下载代码,不过会需要用5积分下载
https://download.csdn.net/download/qq_39897814/11257171
2019/11/25日更新:
1.补充了前台js调用的代码
这里是所须依赖
javax
javaee-api
7.0
以下是代码:
这里是主要的
package com.caesar.controller;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
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;
import org.springframework.stereotype.Controller;
import com.Utils.WebSocketMapUtil;
/**
* 即时通讯
* @author 史**
*
* 2018年9月17日
*/
@Controller
@ServerEndpoint(value = "/websocket")
public class MyWebSocketController {
private volatile static List sessions = Collections.synchronizedList(new ArrayList());
//与某个客户端的连接会话,需要通过它来给客户端发送数据
private Session session;
//设置为静态的 公用一个消息map ConcurrentMap为线程安全的map HashMap不安全
private static ConcurrentMap>> messageMap=new ConcurrentHashMap<>();
/**
* /**
* 连接建立成功调用的方法
* @param session 可选的参数。session为与某个客户端的连接会话,需要通过它来给客户端发送数据
* @param userId 用户id
* @throws Exception
*/
@OnOpen
public void onOpen(Session session) throws Exception{
System.out.println("开始");
this.session = session;
// sessions.add((Session) this);
String key="";//当前用户id
String objectUserId="";//对象id
if("".equals(session.getQueryString()) || session.getQueryString()==null) {
key= "";
}else {
String keString=session.getQueryString();
if(keString.length()>1) {
key=keString.split(",")[0];
objectUserId=keString.split(",")[1];
}else {
key=session.getQueryString();
}
}
WebSocketMapUtil.put(key,this);
if(messageMap.get(key)!=null) {
//说明在用户没有登录的时候有人给用户发送消息
//该用户所有未收的消息
Map> lists=messageMap.get(key);
//对象用户发送的离线消息
List
这里是需要用到的一个工具类
package com.Utils;
import java.util.Collection;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.ConcurrentMap;
import com.caesar.controller.MyWebSocketController;
/**
* 工具类 用来存放删除获取用户
* @author 史**
*
* 2018年9月17日
*/
public class WebSocketMapUtil {
public static ConcurrentMap webSocketMap = new ConcurrentHashMap();
public static void put(String key, MyWebSocketController myWebSocket){
webSocketMap.put(key, myWebSocket);
}
public static MyWebSocketController get(String key){
return webSocketMap.get(key);
}
public static void remove(String key){
webSocketMap.remove(key);
}
public static Collection getValues(){
return webSocketMap.values();
}
}
这里因有一些朋友需要前台代码所以补充一下前台调用的代码(因为这个当初是通过小程序调用的 所以补充的是小程序的前台调用代码,html的代码调用也类似)
// pages/message/chat/chat.js
//获取应用实例
const app = getApp();
/*路径 */
var apiURL = require('../../../apiURL');
Page({
/**
* 页面的初始数据
*/
data: {
receiveUserId:'',//接收消息的用户id
chatRecord:[],//聊天记录
objectuser:[],//聊天对象信息
userInfo:[],//用户信息
chatListId:'',//聊天室id
status:'',//聊天室转态
value:'',
height:'',//设备高度
scrollTop:0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options)
var _this = this;
// _this.getChatRecord();
//将json字符串转为json对象
//对象信息
var objectuser=JSON.parse(options.objectuser);
//聊天室id
var chatListId = options.chatListId;
if(chatListId == ''){//聊天室id为空说明不是从聊天室列表过来的 所以查询和该用户是否有聊天室
_this.isChatList(options.objectuserid, app.globalData.userId);
}else{
//查聊天室的聊天记录
_this.getChatRecord(chatListId, app.globalData.userId);
_this.setData({
chatListId: chatListId,
})
}
//查用户信息
_this.getUserInfo(app.globalData.userId);
_this.data.receiveUserId = options.objectuserid;
_this.setData({
objectuser: objectuser,
})
if (!app.globalData.communication) {
//通讯没有连接 向后台发起连接
wx.connectSocket({//传入对象id 当前用户id和对象用户id
url: apiURL.wxLinkMessage.linkMessages + app.globalData.userId + "," + options.objectuserid,
header: {
'content-type': 'application/json'
},
method: "GET"
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
//连接成功
wx.onSocketOpen(function () {
console.log('连接成功');
app.globalData.communication = true
})
//连接失败
wx.onSocketError(function (res) {
app.globalData.communication = false
console.log('WebSocket连接打开失败,请检查!')
})
//接收
wx.onSocketMessage(function (res) {
console.log("接收服务器发过来的消息")
console.log(res)
})
wx.onSocketClose(function (res) {
console.log('WebSocket 已关闭!')
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
// console.log("++++++++++++++++++++++++++++++")
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
app.globalData.communication=false;
//关闭当前连接
wx.closeSocket()
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
sendMessage: function (e) {
var _this=this;
// console.log(e.detail.value.message)
var message = e.detail.value.message
if (_this.Trim(message) == null || _this.Trim(message) == ''){
return wx.showToast({
title: '信息不能为空',
icon: 'none',
duration: 2000
})
}
//封装消息类型 消息内容 + "[" + 发送消息的人 + ";" + 接收消息的人","+0
//0是单发1是群发
var cotnt = message + "[" + app.globalData.userId + ";" + _this.data.receiveUserId + ',' + 0;
//保存聊天记录
_this.save(cotnt);
wx.sendSocketMessage({
// message + "[" + "1c3546026fe24ff08d28115d58063263" + ";" + '944b50fd0eb64c4c816a4f3bf3203842' + ',' + 0,
data: cotnt,
})
_this.setData({
value:''
})
if (_this.data.status == 0 || _this.data.status==''){
//修改聊天室状态
// console.log("修改")
_this.update()
}
},
/**
* 去空格
*/
Trim: function (str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
},
/**
* 查询两个人的聊天记录
*/
getChatRecord: function (chatListId,sendUserId){
// console.log(sendUserId)
var _this = this;
wx.request({
url: apiURL.wxChatRecord.getChatRecord,
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: { "chatListId": chatListId, "sendUserId": sendUserId },
success: function (data) {
console.log(data)
var chatList = data.data.data;
var len = 10000 * chatList.length;
if (data.data.code == 200) {
return _this.setData({
chatRecord: chatList,
scrollTop: len//定位在最下方 显示最后一条信息
})
}
wx.showToast({
title: '系统错误',
icon: 'none',
duration: 2000
})
}
})
},
// getUserInfo: function () {
// var that = this
// wx.getSetting({
// success(res) {
// if (!res.authSetting['scope.userInfo']) {
// wx.authorize({
// scope: 'scope.userInfo',
// success() {
// that.UserLogin();
// }
// })
// }
// else {
// that.UserLogin();
// }
// }
// })
// },
/**
* 查用户信息
*/
getUserInfo:function(userId){
var _this = this;
//先从缓存拿取 缓存里没有再从 数据库拿取
//console.log("查询用户信息走缓存")
var userInfo = wx.getStorageSync(userId);
// console.log(userInfo)
if (userInfo) {
//成功获取到数据绑定到页面
_this.setData({
userInfo: userInfo
})
} else {
// console.log("缓存查不到用户信息,向后台发起请求")
//查询不到向后台发起请求
//查询用户信息
wx.request({
url: apiURL.wxUser.getBaseInfo,
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded' // post请求时需改成这个才行 否则后台接收不到参数
},
data: { "id": userId},
dataType: "json",
success: function (data) {
// console.log(data)
//获取失败弹窗
if (data.data.code != 200) {
wx.showToast({
title: '系统错误',
icon: 'none',
duration: 2000
})
} else {
// console.log("查询成功")
// console.log(data.data)
//成功获取数据 放到缓存
wx.setStorageSync(app.globalData.userId, data.data.result)
//同时将数据绑定
_this.setData({
userInfo: data.data.result
})
}
}
})
}
},
/**
* 根据双方id查聊天室是否存在
*/
isChatList: function (currentUserId, objectUserId){
var _this = this;
wx.request({
url: apiURL.wxChatList.isGetChatList,
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: { "currentUserId": currentUserId, "objectUserId": objectUserId },
success: function (data) {
// console.log(data)
//查聊天室的聊天记录
_this.getChatRecord(data.data.data.id, app.globalData.userId);
_this.setData({
chatListId: data.data.data.id,
status: data.data.data.status,
})
}
})
},
/**
* 保存聊天记录
*/
save: function (cotnt){
var _this=this;
wx.request({
url: apiURL.wxChatRecord.save,
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: { "message": cotnt },
success: function (res) {
// console.log(res.data.data)
var chatRecord= _this.data.chatRecord;
chatRecord.push(res.data.data)
// console.log(chatRecord)
var len = 1000 * chatRecord.length;
_this.setData({
users: res.data,
userId: app.globalData.userId,
chatRecord:chatRecord,
scrollTop: len,//使新发出的信息显示在最下面
})
}
})
},
/**
* 修改聊天室转态
*/
update: function (){
var _this=this;
wx.request({
url: apiURL.wxChatList.update,
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: { "id": _this.data.chatListId, "status": 1},
success: function (res) {
// console.log(res.data)
if(res.data.code==200){
_this.setData({
status: 1
})
}
}
})
},
/**
* 跳到对象用户详情
*/
sendOtherUser(e){
console.log(e)
var _this=this;
wx.navigateTo({
url: '../../other/personDetails/personDetails?userId=' + _this.data.receiveUserId,
})
},
/**
* 查看我的详情
*/
sendUser:function(){
wx.navigateTo({
url: '../../my/my?userId=' + app.globalData.userId,
})
}
})