正文 

当前位置： 首页 > 程序 > java教程

websocket加layim实现在线聊天系统(代码片段)

yeshaofa yeshaofa     2022-12-08     659

关键词：

实现流程：

　　1.浏览器连接服务器时保存所有用户id以及对应的唯一session（session用户用户消息推送）。

　　　　1.1:判断登录用户是否有离线消息（个人消息以及群消息），有则将离线消息进行推送给登录用户。

 

　　2.前端layim监听消息发送，监听到通过websocket send方法将消息对象发送至服务器

　　3.服务器接收到消息，通多消息对象获取接收者id，通过接收者id获取唯一session。

　　　　3.1: 个人聊天可先判断用户是否在线，如果在线可直接通过接受者id进行消息推送，如果不在线就保存消息，待接收者上线时将此消息推送给接受者。

　　　　3.2: 群消息通过群id获取所有群成员，循环如果在线则发送消息，不在线保存消息。待接收者上线时将消息推送给消息接收者。

　　4.服务器通过session进行消息推送

java

package com.healta.controller;

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


import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import com.healta.chat.vo.User;
import com.jfinal.plugin.activerecord.Record;

//与js代码 new ReconnectingWebSocket("ws://IP地址:端口号/项目根路径/websocket配置的路径/" + 传的参数，可多个)对应
@ServerEndpoint("/websocket/userId")
public class WebSocketController 
	
	public static Map<Integer, User> userMap = new HashMap<>();//保存在线用户

	public static List<Integer> onLineUserIdList = new ArrayList<>();//保存在线的用户id
	public static User user;
	
	
	/**
	 * 浏览器连服务器时触发此方法
	 * @param session
	 * @param userId
	 */
	@OnOpen
	public void onOpen(Session session, @PathParam("userId") Integer userId) 
		/**
		 * 判断当前连接用户是否在线
		 */
		if(!checkOnLineState)//用户上线保存用户唯一session以及保存用户id，可通过用户id获取session
			user = new User();
			user.setUserSession(session);
			user.setUserOnLineType(true);
			userMap.put(userId, user);
			onLineUserIdList.add(userId);
		
		
		//往下可根据不同的需求写相应的逻辑代码，比如离线消息就可以在用户连接服务器时去进行消息推送。或者用户上线提醒。
		
	

	/**
	 * 连接关闭会触发此事件
	 * @param session
	 * @param userId
	 */
	@OnClose
	public void onClose(Session session, @PathParam("userId") Integer userId) 
　　　　　　　　　　//用户下线需要将对于的在线用户进行调整。
		onLineUserIdList.remove(userId);
		userMap.remove(userId);
		//用户下线可以给前端推送一个下线消息，前端接收把好友置灰
	

	/**
	 * 服务器收到消息时触发此方法
	 * @param requestJson
	 * @param session
	 * @param userId
	 */
	@OnMessage
	public void onMessage(String requestJson, Session session, @PathParam("userId") Integer userId) 
		
		//此处通过requestJson消息对象可获取收信人id或者群id
		JSONObject messageObject = JSONObject.parseObject(requestJson);
		String jsonCollectUserId = messageObject.getString("collectUserId");//消息接收者可以是群id也可以是用户id
		String jsonContent = messageObject.getString("content");//消息内容

		try 
			//通过收件人id获取连接session进行消息推送
			userMap.get(收信人id或者群id).getUserSession().getBasicRemote().sendText("消息字符串，用layim的话需要和layim的消息接收类型一致。");
		 catch (IOException e) 
			e.printStackTrace();

　　

js

<script>
    layui.use(‘layim‘, function(layim)
        var copyLayim = layim;
        var websocket = null; 
        //判断当前浏览器是否支持WebSocket
        if (‘WebSocket‘ in window) 
            websocket = new ReconnectingWebSocket("ws://IP地址:端口号/项目根路径/websocket配置的路径/" + 传的参数，可多个);
         else 
            alert(‘当前浏览器 Not support websocket‘)
        
        //连接发生错误的回调方法
                websocket.onerror = function() ; 
        //连接成功建立的回调方法
                websocket.onopen = function() 
        //接收到消息的回调方法
        websocket.onmessage = function(event) 
            var data = event.data;//服务器返回的消息，前端页面可以根据不同的消息做不同的操作。
                    
        
        //连接关闭的回调方法
        websocket.onclose = function() 
        //    setMessageInnerHTML("WebSocket连接关闭");
        
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function() 
            closeWebSocket();
         
        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) 
        //    document.getElementById(‘message‘).innerHTML += innerHTML + ‘<br/>‘;
        
        //关闭WebSocket连接
        function closeWebSocket() 
            websocket.close();
         
        //发送消息
        function send(msg) 
            websocket.send(msg);
        
        
        layim.config(
            brief: false, //是否简约模式（如果true则不显示主面板）
            init: 
                url: ‘基本数据获取接口(格式layui官网有提供)‘
                ,data: ‘userId‘: userId
            ,
            members: 
                url: ‘返回群成员接口‘,
            , 
            uploadImage: 
                  url: ‘图皮上传接口‘
             ,
            chatLog:  ‘跳转至聊天界面url‘ ,
        );
        
        //layim消息发送监听器
        layim.on(‘sendMessage‘, function(res) 
            var mine = res.mine; //包含我发送的消息及我的信息
            var to = res.to; //对方的信息
            var msg = 
                    ‘collectUserId‘: to.id,
                    ‘content‘: mine.content
            
            send(JSON.stringify(msg));
        );
        
        //监听修改签名
        layim.on(‘sign‘, function(value)
            此处可以ajax修改签名
        );     
    );
</script>

 

asp.netsignalr与layim2.0配合轻松实现web聊天室（十三）之附加功能-自定义皮肤

前言　　本篇要讲的算是一个layim代码功能扩充。在原来的laim中已经有自带的换肤功能，而且在skin配置中，你可以添加自己想要的皮肤图片路径。这些内容在接下来都不会涉及，本篇要讲的是自定义皮肤功能，没错就是用户自... 查看详情

asp.netsignalr与layim2.0配合轻松实现web聊天室（十四）之漏掉的客服消息

...服聊天框，人家很热情的和你交谈。我们也可以用layim来实现。首先，页面添加一个按钮，点击按钮触发客服 查看详情

asp.netsignalr与layim2.0配合轻松实现web聊天室之用redis实现用户在线离线状态消息处理

...了用Redis缓存在线用户逻辑。篇幅也比较小，本篇将详细实现用户的上线下线通知、图片效果转换功能。而且，代码和开发思路都会详细介绍。效果展示　　目前有三个用户，user1，user2，user3.下图会简单展示用户上线，下线的消... 查看详情

asp.netsignalr与layim2.0配合轻松实现web聊天室之用redis实现用户在线离线状态消息处理

前言　　上篇的预告好像是“聊天室的小细节，你都注意到了吗？”。今天也是为那篇做铺垫吧。之前的版本有好多问题，比如：当前登录用户是否合法问题，userid参数如果随便传后台没有验证。还有一个致命的问题，用... 查看详情

asp.netsignalr与layim2.0配合轻松实现web聊天室代码重构使用反射工厂解耦

前言　　自从此博客发表以及代码开源以来，得到了许多人的关注。也没许多吧，反正在我意料之外的。包括几位大牛帮我做订阅号推广，真的很感谢他们。另外，还有几个高手给我提了一些架构上的问题。其实本身这个项目是... 查看详情

手写一个的在线聊天系统（原理篇2）(代码片段)

...解一下WebSocket相关的知识点。一、前提回顾基于Netty实现在线聊天系统(原理篇一)二、目录介绍什么是WebSocket？WebSocket如何建立连接？WebSocket数据传输WebS 查看详情

websocket+rabbitmq实现消息推送系统(代码片段)

...可以引入消息队列RabbitMQ进行流量削峰。向指定用户发送WebSocket消息并处理对方不在线的情况：如果 查看详情

java是如何实现客服在线聊天功能的？

...能的实现思路：客户端和服务端之间的通信协议：在实现在线聊天功能的时候，需要考虑客户端和服务端之间的通信协议。可以使用WebSocket协议，这是一种全双工通信协议，支持客户端和服务端之间的实时通信。Java提供了多个We... 查看详情

使用websocket实现网页聊天室(代码片段)

使用WebSocket实现网页聊天室一、文章导读服务器推送你还在使用轮询吗？本文将带你领略WebSocket的魅力，轻松实现服务器推送功能。本文将以下面两方面让你理解WebSocket并应用到具体的开发中WebSocket概述使用WebSocket实现... 查看详情

Websocket 聊天实现

】Websocket聊天实现【英文标题】：Websocketchatimplementation【发布时间】：2014-07-2215:43:18【问题描述】：我看到的Websockets的大多数演示都是关于聊天室应用程序的。我想知道是否可以创建更多的即时消息实现。不同之处在于，在聊... 查看详情

spring-websocket实现简易在线聊天(代码片段)

引入spring-websocket包<dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-websocket</artifactId> <version>$websocket.ver 查看详情

实现 ios 聊天（如whatsapp）：websocket？

】实现ios聊天（如whatsapp）：websocket？【英文标题】：implementingaioschat(likewhatsapp):websocket?【发布时间】：2014-10-0110:57:15【问题描述】：我正在尝试在ios中实现聊天服务。我的问题是：服务（如WhatsApp）如何工作？我找到了一个关... 查看详情

使用websocket实现消息推送

WebSocket上联系客服功能在项目中很难避免，一般有下面三种实现方式：使用http的get方式轮询接入第三方IM系统自己的IM系统基于socket基于websocket第一种方式，最low的，实现简单，但是浪费用户流量；第二种方式，接入简单，功能... 查看详情

swoole+redis+websocket实现点对点即时聊天(代码片段)

Swoole+Redis+webSocket实现点对点即时聊天场景webSocket服务端代码前端代码场景Swoole+Redis+webSocket实现点对点即时聊天。webSocket服务端代码我们需要通过LaravelCommand来实现,因为Swoole只能运行在PHPCLI模式下。1.生成Command类phpart... 查看详情

swoole+redis+websocket实现点对点即时聊天(代码片段)

Swoole+Redis+webSocket实现点对点即时聊天场景webSocket服务端代码前端代码场景Swoole+Redis+webSocket实现点对点即时聊天。webSocket服务端代码我们需要通过LaravelCommand来实现,因为Swoole只能运行在PHPCLI模式下。1.生成Command类phpart... 查看详情

uniapp+websocket实现在线聊天

参考技术A首先在进入程序的时候对后台进行链接，注意这里的链接地址必须是wss开头websock的链接方法用到的api：uni.connectSocketuni.onSocketOpenuni.onSocketMessageuni.onSocketErroruni.onSocketClose由于websocket在与服务器进行链接的时候有可能会... 查看详情

使用websocket实现聊天室(代码片段)

WebSocketnewWebSocket("服务器地址")//创建WebSocket//open:当webSocket服务连接成功时触发socket.addEventListener('open',funtion())Websocket事件open连接建立时触发message客户端接收服务端数据时触发error通讯发生错误时触发close连接关闭时... 查看详情

在线聊天——websocket简介与实际实现(代码片段)

在HTML5之前，浏览器和服务器的通信都是通过HTTP协议进行的，那么引入WebSocket有什么用呢？想像一下，有一个网页正在用文字直播某一场足球比赛的比分，在没有WebSocket时，客户端也就是浏览器实现比分的... 查看详情