首页 > 其他分享 >Websocket+SpringBoot实现简单在线聊天(包含前后端代码)

Websocket+SpringBoot实现简单在线聊天(包含前后端代码)

时间:2023-07-05 21:45:19浏览次数:49  
标签:websocket SpringBoot 1px socketMsg 聊天 import Websocket message nickname

1、样式展示

登录界面

(用户名自己取,密码是111,可在前端文件中改,因为做的比较简单,没有把用户做数据库相关的,所以直接在前端固定了密码是111)

聊天界面

2、代码展示

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>登录</title>
    <script>
        $(function() {
            var websocket=null;

            //登录
            $(".loginBtn").click(function(){
                var nickname=$(".nicknameI").val()
                var password=$(".passwordI").val()
                if(nickname==""){
                    alert("请输入昵称")
                    return
                }
                if(password==""){
                    alert("请输入密码")
                    return
                }
                if(password==111){
                    alert("登录成功")
                    $(".container").hide()
                    $(".messageBox").show()
                    $(".nicknameI").val("")
                    $(".passwordI").val("")
                }else{
                    alert("密码错误")
                }
                //判断当前浏览器是否支持websocket
                var supprotWebSocket='WebSocket' in window || 'MozWebSocket' in window;
                if(supprotWebSocket){
                    //建立websocket连接
                    websocket = new WebSocket("ws://localhost:8080/websocket/"+nickname);
                }else{
                    alert("该浏览器不支持websocket,请更换")
                }

                //建立连接发生错误回调方法
                websocket.onerror=function(){
                    console.log("error")
                }
                //建立连接正确回调
                websocket.onopen=function (){
                    console.log("连接建立成功")
                }
                //收到消息回调方法
                websocket.onmessage=function(event){
                    console.log(event)
                    var flag=event.data.search("恭喜您成功连接上WebSocket")!=-1;
                    console.log(flag)
                     if(flag){
                      onlineMessage(event.data)
                         return
                     }
                    messageShow(event.data)

                }
                //关闭连接回调方法
                websocket.onclose=function() {
                    console.log("连接关闭")
                }
                //监听窗口关闭时间,窗口关闭主动关闭websocket连接,防止连接还没断开就关闭
                window.onbeforeunload=function (){
                    websocket.close();
                }
            })

            //将消息显示到界面
            function messageShow(message){
                $("#messageArea").append('<span>'+message+'</span><br/><br/>');
            }
            //显示在线人数信息
            function onlineMessage(message){
                $(".onlineMessage").empty()
                $(".onlineMessage").append(message)
            }

            //关闭websocket连接
            $(".close").click(function (){
                websocket.close();
                $(".messageBox").hide()
                $(".container").show()
            })

            //发送消息
            $(".send").click(function(){
                var message=$(".message").val();
                var toUser=$(".toUser").val()
                var socketMsg = {msg:message,toUser:toUser};
                if(toUser == ''){
                    //群聊.
                    socketMsg.type = 0;
                }else{
                    //单聊.
                    socketMsg.type = 1;
                }
                //转为JSON格式
                websocket.send(JSON.stringify(socketMsg));
                $(".message").val("")
                $(".toUser").val("")
            })

        });

    </script>

</head>

<body>
<div class="messageBox">
    <div class="onlineMessage"></div>
    <div id="messageArea"></div>
    <div class="operate">
        <input type="text" placeholder="输入你想说的话" class="message">
        <input class="toUser" type="text" placeholder="目标"/>
        <input type="button" value="发送" class="send">
        <input type="button" value="下线" class="close">
    </div>
</div>
<div class="container">
    <ul class="tab">
        <li class="current">快速登录</li>
    </ul>
    <div class="content">
        <div class="maincontent1">
            <div class="nickname">
                <div class="nicknameT">昵称:</div>
                <input type="text" class="nicknameI">
            </div>
            <div class="password">
                <div class="passwordT">密码:</div>
                <input type="password" class="passwordI">
            </div>
            <div class="forget"><a href="#">忘记密码?</a></div>
            <input type="button" value="登录" class="loginBtn" id="conectWebSocket">
        </div>
    </div>
</div>

</body>
<style>
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
    }

    body {
        text-align: center;
    }

    .container {
        width: 400px;
        background-color: rgba(189, 218, 234, 0.7);
        margin: 200px auto;
        border-radius: 30px;
    }

    .maincontent1 {}


    .tab {
        display: flex;
        justify-content: space-between;
        margin: 20px auto 35px auto;
        list-style: none;
    }

    .current {
        border-bottom: 2px solid rgba(161, 161, 160,0.8);
    }

    .tab>li {
        width: 100%;
        padding: 15px ;
        cursor: pointer;
        font-size: 20px;
        text-shadow: 3px 2px 1px darkgray;
    }

    .nickname {
        display: flex;
        justify-content: space-around;
        margin: 20px auto 20px auto;
    }


    .password {
        display: flex;
        justify-content: space-around;
        margin: 20px auto 20px auto;

    }

    .nicknameI,
    .passwordI,
    .message,
    .toUser{
        width: 60%;
        height: 25px;
        border-radius: 5px;
        border: none;
        outline: none;
        box-shadow: -1px 1px 1px 2px rgba(42, 84, 96, 0.16);
    }
    .toUser{
        width:30px;
        margin: 0px 3px 0px 8px;
    }

    .forget {
        width: 90%;
        text-align: right;
    }

    .loginBtn {
        width: 80%;
        height: 35px;
        background-color: rgb(57, 134, 156);
        margin: 30px auto 35px auto;
        border: none;
        border-radius: 7px;
        cursor: pointer;
        box-shadow: -1px 1px 1px 2px rgba(0, 0, 156, 0.16);
    }

    .loginBtn:hover {
        background: rgb(62, 121, 138);
        background-position-x: -280px;
    }
    .messageBox{
        display: none;
        margin: 50px auto;
        width: 500px;
        height: 600px;
        border:3px solid rgb(57, 134, 156);
        border-radius: 15px;
        padding: 10px;
        position: relative;
    }
    .messageBox .send,.close{
        width: 45px;
        height: 26px;
        margin: 0px 3px;
        background-color: rgb(57 134 156 / 68%);;
        border: none;
        border-radius: 7px;
        cursor: pointer;
        box-shadow: 1px 1px 0px 1px rgb(137 137 145 / 70%);
    }
    .messageBox .send:hover,.messageBox .close:hover{
        background-color: rgb(57, 134, 156);
    }
    .operate{
        width: 100%;
        display: flex;
        position: absolute;
        left:calc(250px - 41%);
        bottom: 20px;
    }
    #messageArea{
        width: 400px;
        margin:10px auto 20px;
        padding:20px;
        max-height: 480px;
        white-space: pre-line;
        word-break: break-all;
        overflow-y:auto;

    }
    .onlineMessage{
        width: 430px;
        height: 20px;
        margin:-5px auto;
    }
    #messageArea span{
        padding: 2px 3px;
        margin-top: 3px;
        height: 25px;
        border-radius: 5px;
        border: none;
        outline: none;
        box-shadow: -1px 1px 1px 2px rgba(42, 84, 96, 0.16);
    }
</style>
</html>

后端

首先做一个WebSocket的配置

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

然后需要一个消息实体类

import lombok.Data;

@Data
public class SocketMsg {
    /**
     *聊天类型
     */
    private int type;

    /**
     * 发送者
     */
    private String fromUser;

    /**
     * 接收者
     */
    private String toUser;

    /**
     * 消息
     */
    private String msg;
}

接着写websocket逻辑

import com.google.gson.Gson;
import com.google.gson.JsonParseException;
import com.qcby.socketdemo.entity.SocketMsg;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 * @Auther: liu.ning
 * @Description: websocket的具体实现类
 */
@Slf4j
@ServerEndpoint(value = "/websocket/{nickname}")
@Component
public class MyWebSocket {
    //用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();
    //与某个客户端的连接会话,需要通过它来给客户端发送数据
    private Session session;
    private String nickname;
    private static Map<String,Session> map=new HashMap<>();
    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session,@PathParam("nickname") String nickname) {
        this.session = session;
        this.nickname=nickname;
        map.put(session.getId(),session);
        //加入set中
        webSocketSet.add(this);
        System.out.println("有新连接加入:"+nickname+",当前在线人数为" + webSocketSet.size());
        this.session.getAsyncRemote().sendText("恭喜您成功连接上WebSocket【"+session.getId()+"】-->当前在线人数为:"+webSocketSet.size());

    }
    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);  //从set中删除
        System.out.println("有一连接关闭!当前在线人数为" + webSocketSet.size());
    }
    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息*/
    @OnMessage
    public void onMessage(String message, Session session,@PathParam("nickname") String nickname) {
        System.out.println("来自客户端的消息-->"+nickname+": " + message);
        try{
            //从客户端过来的是json数据,将其转换为SocketMsg对象
            Gson gson=new Gson();
            SocketMsg socketMsg=gson.fromJson(message,SocketMsg.class);
            log.info("json转为对象:"+socketMsg);
            log.info("map"+map);
            if(socketMsg.getType()==1){
                //单聊
                socketMsg.setFromUser(session.getId());
//                socketMsg.setToUser();
                Session fromSession=map.get(socketMsg.getFromUser());
                log.info("touser:"+socketMsg.getToUser());
                Session toSession=map.get(socketMsg.getToUser());
                log.info("接收方:"+toSession+"发送方:"+fromSession);
                if(toSession!=null){
                    fromSession.getAsyncRemote().sendText(nickname+":"+socketMsg.getMsg());
                    toSession.getAsyncRemote().sendText(nickname+":"+socketMsg.getMsg());
                }else{
                    fromSession.getAsyncRemote().sendText("对方不在线或您输入的频道号错误");
                }
            }else{
                //群发消息
                broadcast(nickname+": "+socketMsg.getMsg());
            }
        }catch (JsonParseException e) {
            e.printStackTrace();
        }

    }
    /**
     * 发生错误时调用
     *
     */
    @OnError
    public void one rror(Session session, Throwable error) {
        System.out.println("发生错误");
        error.printStackTrace();
    }
    /**
     * 群发自定义消息
     * */
    public void broadcast(String message){
        for (MyWebSocket item : webSocketSet) {
            item.session.getAsyncRemote().sendText(message);//异步发送消息.
        }
    }
}

 到这儿所有想过逻辑都写完了,我们需要一个登录跳转

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class loginController {

    @RequestMapping("/login")
    public String skip(){
        return "login";
    }
}

启动项目,打开浏览器 输入http://localhost:8080/login,访问登录页面

(这里端口号因为没做配置所以使用的默认端口号8080,根据自己情况更改)

当然我们可以根据启动信息,找到端口号

标签:websocket,SpringBoot,1px,socketMsg,聊天,import,Websocket,message,nickname
From: https://www.cnblogs.com/nliu/p/17529876.html

相关文章

  • springboot修改配置
    springboot修改配置在resources下的Application.properties端口:#服务器端口配置server.port=80logo:#修改bannerspring.main.banner-mode=off 图片:#配置图像spring.banner.image.location=de.jpg日志#日志logging.level.root=error查看.properties可以去spring......
  • 4. SpringBoot整合mybatis
    1.回顾Spring整合Mybatis​Spring​整合Mybatis​需要定义很多配置类​SpringConfig​配置类导入JdbcConfig​配置类导入MybatisConfig​配置类@Configuration@ComponentScan("com.itheima")@PropertySource("classpath:jdbc.properties")@Import({Jdbc......
  • 使用GoEasy快速实现Android原生app中的websocket消息推送
    摘要:GoEasy带来了一项令开发者振奋的消息:全面支持Android原生平台!现在,您可以在Android应用中使用最酷炫的实时通信功能,借助GoEasy轻松实现消息的发送和接收。本文将带您领略GoEasy最新版本的威力,为您的应用增添一抹鲜活的互动色彩。嗨,开发者朋友们!是时候展现您的技术才华,让您的A......
  • springboot 加载自定义的属性配置文件 或者xml文件
    1、properties user.propertiesname=zhangshanage=18  2、xml Pen1.xml<?xmlversion="1.0"encoding="utf-8"?><!DOCTYPEpropertiesSYSTEM"http://java.sun.com/dtd/properties.dtd"><properties><......
  • 3. SpringBoot整合junit
    1.回顾Spring整合junit‍@RunWith(SpringJUnit4ClassRunner.class)@ContextConfiguration(classes=SpringConfig.class)publicclassUserServiceTest{@AutowiredprivateBookServicebookService;@TestpublicvoidtestSave(){bookS......
  • kubesphere devops部署springboot项目
    一:使用流水线devops部署springboot项目的流程: 二、本次项目结构: 其中Dockerfile:FROMopenjdk:8-jdkLABELmaintainer=leifengyang#dockerrun-ePARAMS="--server.port9090"ENVPARAMS="--server.port=8080"RUN/bin/cp/usr/share/zoneinfo/Asia/Shanghai/et......
  • 金蝶Apusic 应用服务器9.0版本上,springboot项目关于文件上传的一个问题
    金蝶Apusic应用服务器9.0版本上,springboot项目关于文件上传的一个问题 项目部署在金蝶v9上使用文件上传时,请求接口获取不到参数。但是在本地启动应用是可以获取到参数,没有任何问题。 @RequestMapping("doUpload")publicvoiddoUpload(DocAttaPagepage,@RequestParam(val......
  • Springboot No bean named 'XXXXX' available 问题解决
    一、问题描述近日在工作中遇见了一个bug,后端程序频频报错Nobeannamed'XXXXX'available。对比同类程序文件,没有发现有任何特殊之处。在网上搜索方法基本上就是扫描包配置、注解问题、路径问题等,皆不能解决我的问题。排查问题是发现出现问题的类命名不符合驼峰规范,按照这个......
  • RunnerGo 新增对WebSocket、dubbo、TCP/IP三种协议的API测试
    大家好,RunnerGo作为一款一站式测试平台不断为用户提供更好的使用体验,最近得知RunnerGo新增对,WebSocket、Dubbo、TCP/IP,三种协议API的测试支持,本篇文章跟大家分享一下使用方法。WebSocket协议WebSocket是一种在单个TCP连接上进行全双工通信的API技术。相比于传统的HTTP......
  • springboot Minio功能实现
    1.导入Minio相关依赖<dependency><groupId>io.minio</groupId><artifactId>minio</artifactId><version>8.4.4</version><exclusions><exclusion><groupId>c......