websocket聊天

tomcat7的支持不是特别好,用换成tomcat8

js关键代码:

    var isWebsocket = window.WebSocket || window.MozWebSocket;//判断当前浏览器是否支WebSocket  
    var websocket = null;
    var isConnect = false;    
    var initWebSocket = function (meetingId){
      var aa=  window.location.host;
        var url = "";
        if (window.location.protocol == 'http:') {
            // 地址格式是:主机名+项目名+客户端注明的名称,
            //例如:ws://localhost:8080/Chat_01/websocket
            url = 'ws://' + window.location.host+ $scope.contextPath + '/webscoket/' +            meetingId+'/'+$scope.currentUser.systemMember.id;
        } else {
            url = 'wss://' + window.location.host + $scope.contextPath+ '/webscoket/' +meetingId+'/'+$scope.currentUser.systemMember.id;
        }
        if (isWebsocket) {
            websocket = new WebSocket(url);//建立连接
            //连接成功建立的回调方法 
            websocket.onopen = function (evt) {
                onOpen(evt);
            };
            //连接关闭的回调方法  
            websocket.onclose = function (evt) {
                onClose(evt);
            };
            //接收到消息的回调方法
            websocket.onmessage = function (evt) {
                onMessage(evt);
            };
            //连接发生错误的回调方法  
            websocket.onerror = function (evt) {
                onError(evt);
            };
        } else {
            layer.alert('对不起,你的浏览器不支持WebSocket');
        }
    }



 //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。  
      window.onbeforeunload = function(){  
          websocket.close();  
      }  


         //页面按钮触发发送消息  
          function send(){  
          var username=document.getElementById('username').value;  
          var message = document.getElementById('text').value;  
          websocket.send(username+"说: "+message+"<br/>");  
          //发送消息后,发送消息框自动清空
          document.getElementById('text').value="";  
      }  




 

服务端关键代码:

若要保存聊天记录,将聊天记录写入服务器的txt文本中,获取聊天记录的时候在读取txt文本

import java.io.IOException;  
import java.util.concurrent.CopyOnWriteArraySet;  
     
import javax.websocket.OnClose;  
import javax.websocket.OnError;  
import javax.websocket.OnMessage;  
import javax.websocket.OnOpen;  
import javax.websocket.Session;  
import javax.websocket.server.ServerEndpoint;  
     
//该注解用来指定一个URI,客户端可以通过这个URI来连接到WebSocket。类似Servlet的注解mapping。无需在web.xml中配置。  
@ServerEndpoint("/websocket/{meetingUuid}/{id}")  //通过这种方式传递参数
public class MyWebSocket {


 private MeetingService meetingService1=(MeetingService) ContextLoader.getCurrentWebApplicationContext().getBean("meetingService");//注入


 // 静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。  
  private static int onlineCount = 0;  
     
  // concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话,可以使用Map来存放,其中Key可以为用户标识  
  private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new                     
  CopyOnWriteArraySet<MyWebSocket>();  
     
  // 与某个客户端的连接会话,需要通过它来给客户端发送数据  
  private Session session;  
  @OnOpen  
  public void onOpen(Session session) {  
    this.session = session;  
    webSocketSet.add(this); // 加入set中  
    addOnlineCount(); // 在线数加1  
    System.out.println("有新连接加入!当前在线人数为" + getOnlineCount());  
  }  
     
  /** 
   * 连接关闭调用的方法 
   */  
  @OnClose  
  public void onClose() {  
    webSocketSet.remove(this); // 从set中删除  
    subOnlineCount(); // 在线数减1  
    System.out.println("有一连接关闭!当前在线人数为" + getOnlineCount());  
  }  
     
  @OnMessage  
  public void onMessage(String message, Session session) {  
    System.out.println("来自客户端的消息:" + message);  
     
    // 群发消息  
    for (MyWebSocket item : webSocketSet) {  
      try {  
        item.sendMessage(message);  
      } catch (IOException e) {  
        e.printStackTrace();  
        continue;  
      }  
    }  
  }  
  @OnError  
  public void onError(Session session, Throwable error) {  
    System.out.println("发生错误");  
    error.printStackTrace();  
  }  
  public void sendMessage(String message) throws IOException {  
    this.session.getBasicRemote().sendText(message);  
    // this.session.getAsyncRemote().sendText(message);  
  }        
  public static synchronized int getOnlineCount() {  
    return onlineCount;  
  }         
  public static synchronized void addOnlineCount() {  
    MyWebSocket.onlineCount++;  
  }      
  public static synchronized void subOnlineCount() {  
    MyWebSocket.onlineCount--;  
  } 




}

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据引用\[1\]和引用\[2\]的内容,可以使用WebSocket实现历史聊天记录的功能。具体的解决思路是,在加载上一页聊天记录时,先保存当前列表的第一项的id为临时id,关闭滚动动画去加载上一页。加载完后,将上一页的聊天记录数组与当前聊天记录数组合并,然后将当前滚动id设为之前保存的临时id,再打开滚动动画。这样就可以实现加载历史聊天记录的功能。 在代码中,可以使用scroll-view组件来展示聊天记录,设置scroll-y为true,表示可以垂直滚动。通过设置scroll-with-animation为scrollAnimation变量,可以控制滚动时是否开启动画效果。使用scroll-into-view属性来设置滚动到指定的id位置。在scroll-view组件上监听scrolltoupper事件,当滚动到顶部时触发loadHistory方法,加载上一页的聊天记录。 具体的代码实现可以参考引用\[2\]中的示例代码。其中,msgList数组用来存储聊天记录,page变量表示加载的页码,默认为1。scrollAnimation变量用来控制滚动动画的开启与关闭。scrollToView变量用来设置滚动到指定的id位置。viewId变量用来保存临时停留的id。 通过以上的实现,就可以实现WebSocket历史聊天记录的功能。 #### 引用[.reference_title] - *1* [SpringBoot与webSocket实现在线聊天室——实现私聊+群聊+聊天记录保存](https://blog.csdn.net/qq_47719491/article/details/119674507)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [【小程序】解决websocket加载历史聊天记录后,拼接记录导致页面乱滚动](https://blog.csdn.net/qq_37451395/article/details/105771667)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值