效果如下:

java实现逻辑:

1.引入maven依赖

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-websocket</artifactId>

</dependency>

2.创建一个服务端

package com.example.demo.controller;

import org.springframework.web.bind.annotation.RestController;

import javax.websocket.*;

import javax.websocket.server.PathParam;

import javax.websocket.server.ServerEndpoint;

import java.io.IOException;

import java.util.Map;

import java.util.Set;

import java.util.concurrent.ConcurrentHashMap;

@ServerEndpoint("/websocket/{name}")

@RestController

public class WebSocketServer {

    //存储客户端的连接对象,每个客户端连接都会产生一个连接对象

    private static ConcurrentHashMap<String,WebSocketServer> map=new ConcurrentHashMap();

    //每个连接都会有自己的会话

    private Session session;

    private String name;

    @OnOpen

    public void open(@PathParam("name") String name, Session session){

        map.put(name,this);

        System.out.println(name+"连接服务器成功");

        System.out.println("客户端连接个数:"+getConnetNum());

        this.session=session;

        this.name=name;

    }

    @OnClose

    public void close(){

        map.remove(name);

        System.out.println(name+"断开了服务器连接");

    }

    @OnError

    public void error(Throwable error){

        error.printStackTrace();

        System.out.println(name+"出现了异常");

    }

    @OnMessage

    public void getMessage(String message) throws IOException {

        System.out.println("收到"+name+":"+message);

        System.out.println("客户端连接个数:"+getConnetNum());

        Set<Map.Entry<String, WebSocketServer>> entries = map.entrySet();

        for (Map.Entry<String, WebSocketServer> entry : entries) {

            if(!entry.getKey().equals(name)){//将消息转发到其他非自身客户端

                entry.getValue().send(message);

            }

        }

    }

    public void send(String message) throws IOException {

        if(session.isOpen()){

           session.getBasicRemote().sendText(message);

        }

    }

    public int  getConnetNum(){

        return map.size();

    }

}

3.一个配置类

@Configuration

public class WebSocketConfig {

    @Bean

    public ServerEndpointExporter serverEndpointExporter() {

        return new ServerEndpointExporter();

    }

}

//客户端html代码,此处创建2个客户端,一个叫xiaoMing一个叫xiaoHua

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>当前用户xiaoMing</title>

</head>

<style>

    #message{

        width: 50%;

        height: 500px;

        border: 1px solid black;

        background-color: darkgray;

    }

    #inputVal{

        width: 50%;

    }

    input{

        width: 92%;

    }

</style>

<body>

<h1>当前用户xiaoMing</h1>

<div id="message">

</div>

<div id="inputVal">

    <input type="text" name="text">

    <button onclick="send()">发送</button>

</div>

<script>

    var messageEl=document.getElementById("message");

    var inputEl=document.getElementsByTagName("input")[0];

    var websocket=null;

    if('WebSocket' in window){

        websocket=new WebSocket("ws:localhost:2300/websocket/xiaoMing");

    }else {

        alert("浏览器不支持");

    }

    websocket.onopen=function () {

        console.log("webscoket已经连接成功");

        addMessage("webscoket已经连接成功");

    };

    websocket.onclose=function () {

        console.log("webscoket连接失败");

        addMessage("webscoket连接失败");

    };

    websocket.onmessage=function (event) {

        addMessage(event.data);

    };

    websocket.onerror=function () {

        console.log("webscoket连接失败");

        addMessage("webscoket连接失败");

    };

    function addMessage(message) {

        messageEl.innerHTML+=message+"</br>";

    }

    function send() {

        websocket.send("xiaoMing:"+inputEl.value);

        messageEl.innerHTML+="我:"+inputEl.value+"</br>";

    }

</script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>当前用户xiaoHua</title>

</head>

<style>

    #message{

        width: 50%;

        height: 500px;

        border: 1px solid black;

        background-color: darkgray;

    }

    #inputVal{

        width: 50%;

    }

    input{

        width: 92%;

    }

</style>

<body>

<h1>当前用户xiaoHua</h1>

<div id="message">

</div>

<div id="inputVal">

    <input type="text" name="text">

    <button onclick="send()">发送</button>

</div>

<script>

    var messageEl=document.getElementById("message");

    var inputEl=document.getElementsByTagName("input")[0];

    var websocket=null;

    if('WebSocket' in window){

        websocket=new WebSocket("ws:localhost:2300/websocket/xiaoHua");

    }else {

        alert("浏览器不支持");

    }

    websocket.onopen=function () {

        console.log("webscoket已经连接成功");

        addMessage("webscoket已经连接成功");

    };

    websocket.onclose=function () {

        console.log("webscoket连接失败");

        addMessage("webscoket连接失败");

    };

    websocket.onmessage=function (event) {

        addMessage(event.data);

    };

    websocket.onerror=function () {

        console.log("webscoket连接失败");

        addMessage("webscoket连接失败");

    };

    function addMessage(message) {

        messageEl.innerHTML+=message+"</br>";

    }

    function send() {

        websocket.send("xiaoHua:"+inputEl.value);

        messageEl.innerHTML+="我:"+inputEl.value+"</br>";

    }

</script>

</body>

</html>

springboot+websocket实现简单的在线聊天功能的更多相关文章

  1. 基于PHP实现一个简单的在线聊天功能（轮询ajax ）

    基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...

  2. JAVA结合WebSocket实现简单客服聊天功能

    说明:该示例只简单的实现了客服聊天功能. 1.聊天记录没有保存到数据库中,一旦服务重启,消息记录将会没有,如果需要保存到数据库中,可以扩展 2.页面样式用的网上模板,样式可以自己进行修改 3.只能由用 ...

  3. 使用WebSocket实现简单的在线聊天室

    前言:我自已在网上找好了好多 WebSocket 制作 在线聊天室的案列,发现大佬们写得太高深了 我这种新手看不懂,所以就自已尝试写了一个在线简易聊天室 (我只用了js 可以用jq ) 话不多说,直接 ...

  4. WebSocket实现简单的在线聊天

    SuperWebSocket在WebService中的应用 最开始使用是寄托在IIS中,发布之后测试时半个小时就会断开,所以改为WindowsService 1. 新建Windows服务项目[Test ...

  5. 使用websocket实现在线聊天功能

    很早以前为了快速达到效果,使用轮询实现了在线聊天功能,后来无意接触了socket,关于socket我的理解是进程间通信,首先要有服务器跟客户端,服务的启动监听某ip端口定位该进程,客户端开启socke ...

  6. 基于Server-Sent Event的简单聊天室　Web 2.0时代，即时通信已经成为必不可少的网站功能，那实现Web即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。

    基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...

  7. Spring Websocket实现简易在线聊天功能

    针对Spring Websocket的实现,我参照了其他博主的文章https://www.cnblogs.com/leechenxiang/p/5306372.html 下面直接给出实现: 一.引入相 ...

  8. websocket简单实现在线聊天

    WebSocket简介与消息推送 B/S架构的系统多使用HTTP协议,HTTP协议的特点: 1 无状态协议2 用于通过 Internet 发送请求消息和响应消息3 使用端口接收和发送消息,默认为80端 ...

  9. html5+springboot+websocket的简单实现

    环境 window7,IntelliJ IDEA 2019.2 x64 背景:利用IntelliJ来搭建springboot框架,之后来实现websocket的功能.websocket只是实现了画面上 ...

随机推荐

  1. 第5章 if 语句

    第5章 if 语句 5.1 一个简单示例 cars = ['audi', 'bmw', 'subaru', 'toyota'] for car in cars: if car == 'bmw': pr ...

  2. JavaScript基础语法资料

    JavaScript基础第01天 1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...

  3. 软件人如何快速晋升CTO（一）

    1.场景描述 ​ 软件人如何快速晋升CTO? 实战操作,介绍下如何0成本拥有自己的软件公司,出任CTO/CEO. ​ 2020年 8月16日,软件老王拿到公司的营业执照和公章了,税务登记也一起办理好了 ...

  4. hadoop平台环境搭建

    centos01 配置静态ip vim /etc/sysconfig/network-scripts/ifcfg-eth0 见图1 修改主机名 vim /etc/sysconfig/network 见 ...

  5. 【Spring注解驱动开发】二狗子让我给他讲讲@EnableAspectJAutoProxy注解

    写在前面 最近,二狗子入职了新公司,新入职的那几天确实有点飘.不过慢慢的,他发现他身边的人各个身怀绝技啊,有Spring源码的贡献者,有Dubbo源码的贡献者,有MyBatis源码的贡献者,还有研究A ...

  6. 【Android】Android开发小功能，倒计时的实现。时间计时器倒计时功能。

    作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...

  7. Android开发之强大的网络判断工具，判断是否联网，判断是wifi还是3g网络等java工具代码类

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985, 转载请说明出处. 给大家分享一个Android开发者常用的工具类.主要针对网络判断的 功能强大.下面 ...

  8. Application.LoadLevel

    Unity在场景切换之间清理下内存 http://www.cnblogs.com/dongz888/p/4920714.html

  9. Spine学习九 - 冰冻效果

    想象这样一个效果,一个人被冰霜攻击命中,然后这个人整个就被冰冻了,那么spine动画要如何实现这个效果呢? 1.首先需要一个Spine动画,这个动画应该是相对静止的,因为人物已经被冰冻了,那么这个人儿 ...

  10. CA定义以及功能说明

    当您访问以HTTPS开头的网站时,即表示正在使用CA.CA是Internet的重要组成部分.如果不存在CA,那么将无法安全在线购物以及使用网银在线业务等.什么是CA?CA具体是做什么的,又是如何确保您 ...