【WebSocket】---实现一对一聊天功能

实现一对一聊天功能

功能介绍:实现A和B单独聊天功能,即A发消息给B只能B接收,同样B向A发消息只能A接收。

本篇博客是在上一遍基础上搭建,上一篇博客地址:【WebSocket】---实现游戏公告功能。源码会在其它案例全部写完,在上传到gitHub,到时候会补源码地址。

先看演示效果:

一、案例解析

1、PTPContoller

/**
 * 功能描述:简单版单人聊天
 * 这里没有用到@SendTo("/topic/game_chat")来指定订阅地址,而是通过SimpMessagingTemplate来指定
 */
@Controller
public class PTPContoller {
    @Autowired
    private WebSocketService ws;

    @MessageMapping("/ptp/single/chat")
    public void singleChat(InMessage message) {
        ws.sendChatMessage(message);
    }
}

这里和前面的公告消息,最大的区别就是接口上没有通过@SendTo("/topic/game_chat")来发送消息。

(1)@SendTo和SimpMessagingTemplate区别

spring websocket基于注解的@SendTo和@SendToUser虽然方便,但是有局限性,例如我这样子的需求,我想手动的把消息推送给某个人,或者特定一组人,怎么办,

@SendTo只能推送给所有人(它是一个具体地址,一点都不灵活),@SendToUser只能推送给请求消息的那个人,这时,我们可以利用SimpMessagingTemplate这个类

SimpMessagingTemplate有俩个推送的方法

convertAndSend(destination, payload);            //将消息广播到特定订阅路径中,类似@SendTo
convertAndSendToUser(user, destination, payload);//将消息推送到固定的用户订阅路径中,类似@SendToUser

2、WebSocketService

import com.jincou.websocket.model.InMessage;
import com.jincou.websocket.model.OutMessage;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Service;

/**
 * 功能描述:简单消息模板,用来推送消息
 */
@Service
public class WebSocketService {

    @Autowired
    private SimpMessagingTemplate template;

    /**
     * 简单点对点聊天室
     */
    public void sendChatMessage(InMessage message) {
        //可以看出template最大的灵活就是我们可以获取前端传来的参数来指定订阅地址
        //前面参数是订阅地址,后面参数是消息信息
        template.convertAndSend("/chat/single/"+message.getTo(),
                new OutMessage(message.getFrom()+" 发送:"+ message.getContent()));
    }

3、app.js

其它地方和公告的app.js一样,只有下面两点做了一点修改

function connect() {
    var from = $("#from").val();
    var socket = new SockJS(‘/endpoint-websocket‘);
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        setConnected(true);
        console.log(‘Connected: ‘ + frame);
        //1、通过+from就可以灵活的用当前用户的某一信息来指定该用户订阅地址。
        stompClient.subscribe(‘/chat/single/‘+from, function (result) {
            showContent(JSON.parse(result.body));
        });
    });
}

function sendName() {
     //2、这里出了发送content信息外,还发送了发送者用户信息,和接受者的信息
    stompClient.send("/app/ptp/single/chat", {}, JSON.stringify({‘content‘: $("#content").val(), ‘to‘:$("#to").val(), ‘from‘:$("#from").val()}));
}

4、user.html

其它地方也和之前公告的一样,下面是修改的地方

  <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <input type="text" id="from" class="form-control" placeholder="我是">
                    <input type="text" id="to" class="form-control" placeholder="发送给谁">

                    <input type="text" id="content" class="form-control" placeholder="请输入...">

                </div>
                <button id="send" class="btn btn-default" type="submit">发送</button>
            </form>
        </div>

5、再把整个思路缕一缕

以 A 向 B 发送消息为例

(1)form输入框输入:“A”,to输入框输入 “B” 点击“Connect”建立websocket连接

(2)那么的 A 用户的订阅地址就是‘/chat/single/A‘

(3)前端在“content”按钮中输入“你今天吃鸡了吗?”,再点击“发送”按钮

(4)后台通过接受处理就成了:

template.convertAndSend("/chat/single/B",new OutMessage(" A 发送:你今天吃鸡了吗?"));

那么 B 向 A 发送性质一模一样。就可以实现一对一聊天。

注意:这个只是演示,并不是真正一对一聊天,一般如果实现一对一聊天,那么form和to都应该是唯一的,比如该用户的userID,这样就可以真正实现一对一聊天了。

想太多,做太少,中间的落差就是烦恼。想没有烦恼,要么别想,要么多做。中校【19】

原文地址:https://www.cnblogs.com/qdhxhz/p/9452237.html

时间: 2024-11-08 22:04:51

【WebSocket】---实现一对一聊天功能的相关文章

SSH 项目中 使用websocket 实现网页聊天功能

参考文章  :java使用websocket,并且获取HttpSession,源码分析    http://www.cnblogs.com/zhuxiaojie/p/6238826.html 1.在项目中引入依赖 websocket遵循了javaee规范,所以需要引入javaee的包 1 <dependency> 2 <groupId>javax.websocket</groupId> 3 <artifactId>javax.websocket-api<

javaweb与websocket实现在线聊天功能总结

技术从一开始ajax轮询后来改成websocket 碰到的一些问题的处理: websocket的pom依赖 <dependency> <groupId>org.springframework</groupId> <artifactId>spring-websocket</artifactId> <version>4.0.5.RELEASE</version> </dependency> 首先是配置处理器 imp

Java和WebSocket开发网页聊天室

小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项目简介 WebSocket是HTML5一种新的协议,它实现了浏览器与服务器全双工通信,这里就将使用WebSocket来开发网页聊天室,前端框架会使用AmazeUI,后台使用Java,编辑器使用UMEditor. 二.涉及知识点 网页前端(HTML+CSS+JS)和Java 三.软件环境 Tomcat

javaweb webSocket 实现简单的点对点聊天功能

本文依据 http://redstarofsleep.iteye.com/blog/1488639?page=4  内容修改完成,实现点对点聊天 需要 jdk 7 , tomcat需要支持websocket的版本 1.InitServlet 该类主要是用来初始化构造将来存储用户身份信息的map仓库,利用其初始化方法Init 初始化仓库, 利用其静态方法getSocketList 获得对应的用户身份信息. webSocket ,我认为MessageInbound 用来识别登录人的信息,用它来找到对

使用WebSocket实现网页聊天室

知道WebSocket挺久了,但是一直没提起兴趣去了解它. 今天听@成熟的毛毛虫 说到slack.小小的试用了一下,发现slack的聊天功能做得相当强大,看了下网络请求,发现是基于WebSocket实现的.顿时提起兴趣,想了解下这强大的WebSocket. 先了解下WebSocket. 开源中国的介绍:http://www.oschina.net/p/websocket 百度百科的介绍:http://baike.baidu.com/link?url=yMTBVobtkp1E1a0wrRJlnEX

iOS通过SocketRocket实现websocket的即时聊天

之前公司的即时聊天用的是常轮循,一直都觉得很不科学,最近后台说配置好了socket服务器,我高兴地准备用asyncsocket,但是告诉我要用websocket,基于HTML5的,HTML5中提出了一种新的双向通信协议--WebSocket,本文尝试采用这种技术来实现以上的实时聊天功能. 在搜索了很多资料后,用square大神的SocketRocket进行实现,会比较简单,同时URL和端口,发送消息参数需要和后台约定好. 首先pod导入SocketRocket platform :ios, '7

HTML5 WebSocket实现点对点聊天的示例代码

HTML5的websocket与Tomcat实现了多人聊天,那是最简单也是最基本的,其中注意的就是开发环境,要满足jdk1.7和tomcat8,当然了tom7的7.063也行,在网站上找到了用google关于websocket的点对点聊天,更好的是可以和大多数系统很好的配合起来看下效果图. 因为是模拟的,这里给出的是两个JSP页面A和B,里面分别向session里放了两个名字小明和小化,注意,这里的session是HttpSessionsession,之前多人聊天里的session是javax.

微信小程序实现即时通信聊天功能的实例代码

项目背景:小程序中实现实时聊天功能 一.服务器域名配置 配置流程 配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html 二.nginx中配置反向代理加密websocket(wss) ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 3

Redis实现聊天功能

在学习了Redis做为消息队列之后研究 了redis聊天的功能. 其实用关系型数据库也可以实现消息功能,自己就曾经用mysql写过一个简单的消息的功能.RDB中思路如下: ** 在实际中可以完全借助mysql数据库实现聊天功能,建立一个表,保存接收人的username.message.isConsumed等信息,用户登录之后采用心跳机制不停的检测数据库并消费消息. 心跳可以做好多事,比如检测检测当前用户是否已经登录,如果已经登录剔除之前已经登录的用户,实现一个用户一次登录的功能. 心跳可以采用J