服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|JAVA教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|JavaScript|

服务器之家 - 编程语言 - JAVA教程 - SpringBoot+Websocket实现一个简单的网页聊天功能代码

SpringBoot+Websocket实现一个简单的网页聊天功能代码

2020-12-20 14:30Ldlood JAVA教程

本篇文章主要介绍了SpringBoot+Websocket实现一个简单的网页聊天功能代码,具有一定的参考价值,有需要的可以了解一下

最近做了一个springboot的项目,被springboot那简介的配置所迷住。刚好项目中,用到了websocket。于是,我就想着,做一个springboot+websocket简单的网页聊天demo。

效果展示:

SpringBoot+Websocket实现一个简单的网页聊天功能代码

当然,项目很简单,没什么代码,一眼就能明白

导入websocket的包。

通过使用springboot导入包的时候,我们可以发现,很多包都是以 spring-boot-starter 开头的,对于我这种强迫症 ,简直是福音

?
1
2
3
4
<dependency>
  <groupid>org.springframework.boot</groupid>
  <artifactid>spring-boot-starter-websocket</artifactid>
</dependency>

配置websocket

服务端

首先新建一个websocketconfig的类,添加 @component 注解 注入一个bean

?
1
2
3
4
5
6
7
8
9
@component
public class websocketconfig {
 
  @bean
  public serverendpointexporter serverendpointexporter() {
 
    return new serverendpointexporter();
  }
}

新建一个service,本来觉得是新建一个控制器,但是我觉得这也不是控制器,但是也不太是service。最后还是选择新建一个servece。这里你如果有更好的想法可以按照你的来。

这个service里面有4个方法,这些方法很简单,通过名称就可以看出是什么意思。

?
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
@component
@serverendpoint("/websocket")
@slf4j
public class websocket {
 
  private session session;
 
  private static copyonwritearrayset<websocket> websockets = new copyonwritearrayset<>();
 
  private messagevo messagevo = new messagevo();
 
  @onopen
  public void onopen(session session) {
    this.session = session;
    websockets.add(this);
 
 
    messagevo.settype(1);
    messagevo.setusernum(websockets.size());
    messagevo.setmessage("有新的连接");
 
    objectmapper mapper = new objectmapper();
 
    string json = "";
    try {
      json = mapper.writevalueasstring(messagevo);
    } catch (exception ex) {
      log.error(ex.getmessage());
    }
 
    this.sendmessage(json);
    log.info("【websocket消息】有新的连接, 总数:{}", websockets.size());
  }
 
 
  @onclose
  public void onclose() {
    websockets.remove(this);
 
    messagevo.settype(2);
    messagevo.setusernum(websockets.size());
    messagevo.setmessage("有用户离开");
 
    objectmapper mapper = new objectmapper();
 
    string json = "";
    try {
      json = mapper.writevalueasstring(messagevo);
    } catch (exception ex) {
      log.error(ex.getmessage());
    }
 
    this.sendmessage(json);
 
 
    log.info("【websocket消息】连接断开, 总数:{}", websockets.size());
  }
 
  @onmessage
  public void onmessage(string message) {
 
    messagevo.settype(3);
    messagevo.setusernum(websockets.size());
    messagevo.setmessage(message);
 
    objectmapper mapper = new objectmapper();
 
    string json = "";
    try {
      json = mapper.writevalueasstring(messagevo);
    } catch (exception ex) {
      log.error(ex.getmessage());
    }
 
    this.sendmessage(json);
 
    log.info("【websocket消息】收到客户端发来的消息:{}", message);
  }
 
  public void sendmessage(string message) {
    for (websocket websocket : websockets) {
      log.info("【websocket消息】广播消息, message={}", message);
      try {
        websocket.session.getbasicremote().sendtext(message);
      } catch (exception e) {
        e.printstacktrace();
      }
    }
  }
}

客户端

客户端也就是我们的html,我用的是原生html5的websocket ,不需要其他的js。直接在html中写js就可以

?
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script type="application/javascript">
  var websocket = null;
  var cahtnum = $('.chat-num').text();
  if ('websocket' in window) {
    websocket = new websocket('ws://localhost:8080/chat/websocket');
 
  } else {
    alert('该浏览器不支持websocket');
  }
 
  websocket.onopen = function (event) {
    console.log('websocket建立连接');
  }
 
  websocket.onclose = function (event) {
    console.log('websocket关闭连接');
  }
 
  websocket.onmessage = function (event) {
    console.log('websocket收到消息' + event.data);
    var result = $.parsejson(event.data);
    if (result.type == 3) {
      var element = document.getelementbyid('message-template').innerhtml;
      $('.message-container').append(element);
      $(".message-content:last").html(result.message);
    }
    else {
      $('.chat-num').text(result.usernum);
    }
 
  }
 
  websocket.onerror = function (event) {
    console.log('websocket通信发生错误');
 
  }
 
  window.onbeforeunload = function (event) {
    websocket.close();
  }
 
  $('.send-message').click(function () {
    var message = $('.chat-message').val();
    if (message == "") {
      mdui.alert('请输入要发送的消息');
      return;
    }
    sendmessage(message);
    $('.chat-message').val("");
  })
 
  function sendmessage(message) {
    websocket.send(message);
  }
</script>

这个就是全都的功能,非常简单,没什么特别的功能和代码。

最后附上github的源代码传送门

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:http://www.jianshu.com/p/2042cbe5a62c

延伸 · 阅读

精彩推荐