好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

WebSocket实现数据库更新时前端页面刷新

本文实例为大家分享了websocket实现数据库更新时前端 页面刷新 ,供大家参考,具体内容如下

后台代码:

websocketconfig:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

package com.x测试数据mon.websocket;

 

import org.springframework.context.annotation.bean;

import org.springframework.context.annotation.configuration;

import org.springframework.web.socket.server.standard.serverendpointexporter;

 

@configuration

public class websocketconfig {

  @bean

  public serverendpointexporter serverendpointexporter() {

  return new serverendpointexporter();

  }

}

websocketservlet:

?

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

package com.x测试数据mon.websocket;

import com.alibaba.fastjson.jsonobject;

import org.springframework.stereotype测试数据ponent;

 

import java.io.ioexception;

import java.util.map;

import java.util.concurrent.concurrenthashmap;

import javax.websocket.*;

import javax.websocket.server.pathparam;

import javax.websocket.server.serverendpoint;

 

@serverendpoint ( "/websocket/{userid}" )

@component

public class websocketservlet {

 

  private static int onlinecount = 0 ;

  private static map<string, websocketservlet> clients = new concurrenthashmap<>();

  private session session;

  private string userid;

 

  @onopen

  public void onopen( @pathparam ( "userid" ) string userid, session session) throws ioexception {

 

  this .userid = userid;

  this .session = session;

 

  addonlinecount();

  clients.put(userid, this );

  system.out.println( "已连接" );

  }

 

  @onclose

  public void onclose() throws ioexception {

  clients.remove(userid);

  subonlinecount();

  }

 

  @onmessage

  public void onmessage(string message) throws ioexception {

 

  jsonobject jsonto = jsonobject.parseobject(message);

 

  if (!jsonto.get( "to" ).equals( "all" )){

  sendmessageto( "给一个人" , jsonto.get( "to" ).tostring());

  } else {

  sendmessageall( "给所有人" );

  }

  }

 

  @onerror

  public void onerror(session session, throwable error) {

  error.printstacktrace();

  }

 

  public void sendmessageto(string message, string to) throws ioexception {

  // session.getbasicremote().sendtext(message);

  //session.getasyncremote().sendtext(message);

  for (websocketservlet item : clients.values()) {

  if (item.userid.equals(to) ){

  item.session.getasyncremote().sendtext(message);

  }

  }

  }

 

  public void sendmessageall(string message) throws ioexception {

  for (websocketservlet item : clients.values()) {

  item.session.getasyncremote().sendtext(message);

  }

  }

 

 

  public static synchronized int getonlinecount() {

  return onlinecount;

  }

 

  public static synchronized void addonlinecount() {

  websocketservlet.onlinecount++;

  }

 

  public static synchronized void subonlinecount() {

  websocketservlet.onlinecount--;

  }

 

  public static synchronized map<string, websocketservlet> getclients() {

  return clients;

  }

}

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

var websocket = null ;

 

//判断当前浏览器是否支持websocket

if ( 'websocket' in window) {

  websocket = new websocket( "ws://localhost:8086/websocket/1" );

} else {

  alert( '当前浏览器 not support websocket' )

}

 

//连接发生错误的回调方法

websocket.onerror = function() {

  console.log( "websocket连接发生错误" );

};

 

//连接成功建立的回调方法

websocket.onopen = function() {

  console.log( "websocket连接成功" );

}

 

//接收到消息的回调方法

websocket.onmessage = function(event) {

  //返回数据转json

  var json=json.parse(event.data);

  //result为bootstrap table 返回数据

  var rows=result.rows;

  for (var i= 0 ;i<rows.length;i++){

  var row=rows[i];

  if (row.id==json.id){

  //判断列id相同时刷新表格

  //$('#datagrid').bootstraptable('updatebyuniqueid', {index: i, row: row});'refresh'

  $( '#datagrid' ).bootstraptable( 'refresh' );

  }

  }

  console.log(event.data);

}

 

//连接关闭的回调方法

websocket.onclose = function() {

  console.log( "websocket连接关闭" );

}

 

//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。

window.onbeforeunload = function() {

  closewebsocket();

}

 

//关闭websocket连接

function closewebsocket() {

  websocket.close();

}

返回前台是调用方法:

?

1

2

3

4

5

6

7

@autowired

private websocketservlet scoket;

 

//学生信息

xstudentinfoentity student = xstudentinfoservice.getobjectbyid(id.replace( "\"" , "" ));

//提醒学生数据发生改变

scoket.sendmessageall(jsonobject.tojsonstring(student));

pom.xml: 

?

1

2

3

4

<dependency>

  <groupid>org.springframework</groupid>

  <artifactid>spring-websocket</artifactid>

</dependency>

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

原文链接:https://blog.csdn.net/zwl18210851801/article/details/87931653

查看更多关于WebSocket实现数据库更新时前端页面刷新的详细内容...

  阅读:20次