使用websocket实现一对一聊天

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

    对于websocket网上概念一搜一大把,我也不再复制粘贴了,这里就贴上一个标签给需要的小伙伴提供思路,本文也会附上给我力量的网址:https://www.cnblogs.com/interdrp/p/7903736.html。需要的小伙伴去这里看吧。

1、简单demo地址:https://gitee.com/java_jiban/WebSocketTest(项目用的是eclipse、tomcat7+、maven、ssm)

先看一下项目结构

其中有实现登录功能但并没有链接数据库,只是实现了一个在线人数显示

先看实体类

有些字段也并未用到,小伙伴们可以把信息填上实现一个更为完整的聊天功能

再看看controller

里边只实现了一个简单的登录功能,为了添加用户并跳转到聊天页面,下面就是实现聊天需要的代码了首先需要一个后端服务器,附代码

 package com.ca.socket.test;

import java.io.IOException;  
import java.util.ArrayList;
import java.util.List;
import java.util.Map;  
import java.util.concurrent.ConcurrentHashMap;  

import javax.websocket.*;  
import javax.websocket.server.PathParam;  
import javax.websocket.server.ServerEndpoint;

import com.ca.entity.Message;
import com.ca.entity.UserInfo;


import net.sf.json.JSONObject;


@ServerEndpoint(“/websocket/{username}”) 
public class Websocket {
private static int onlineCount = 0;  
    private static Map<UserInfo, Websocket> clients = new ConcurrentHashMap<UserInfo, Websocket>();  
    private Session session;  
    private UserInfo user; 
    private static int id = 0;
      
    @OnOpen  
    public void onOpen(@PathParam(“username”) String username, Session session) throws IOException {  
  
    user=new UserInfo(id+1,username);
    List<Message> list=new ArrayList<Message>();
    user.setMegs(list);
   
        this.session = session;  
          
        addOnlineCount();  
        clients.put(user, this);  
        System.out.println(“已连接”);  
    }  
  
    @OnClose  
    public void onClose() throws IOException {  
        clients.remove(user);  
        subOnlineCount();  
    }  
  
    @OnMessage  
    public void onMessage(String message) throws IOException {  
  
        JSONObject jsonTo = JSONObject.fromObject(message);  
          
        if (!jsonTo.get(“To”).equals(“All”)){
        Message mes=new Message();
        mes.setFromName(user.getName());
        mes.setMessageText(jsonTo.get(“massege”).toString());
        mes.setToName(jsonTo.get(“To”).toString());
        user.getMegs().add(mes);
            sendMessageTo(jsonTo.get(“massege”).toString(), 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 {  
        for (Websocket item : clients.values()) { 
            if (item.user.getName().equals(To) )  
                item.session.getAsyncRemote().sendText(message+”,”+user.getName());  
        }  
    }  
      
    public void sendMessageAll(String message) throws IOException {  
        for (Websocket item : clients.values()) {  
            item.session.getAsyncRemote().sendText(message);  
        }  
    }  
      
    public static synchronized int getOnlineCount() {  
        return onlineCount;  
    }  
  
    public static synchronized void addOnlineCount() {  
    Websocket.onlineCount++;  
    }  
  
    public static synchronized void subOnlineCount() {  
    Websocket.onlineCount–;  
    }  
  
    public static synchronized Map<UserInfo, Websocket> getClients() {  
        return clients;  
    }
}

其次就是客户端的js

var websocket = null;  
//var username = sessionStorage.getItem(“name”);
 
//判断当前浏览器是否支持WebSocket  
if (‘WebSocket’ in window) {  
   websocket = new WebSocket(“ws://” + document.location.host + “/WebSocketTest/websocket/” + $(“#userName”).val());  
} else {  
   alert(‘当前浏览器 Not support websocket’)  
}  
 
//连接发生错误的回调方法  
websocket.onerror = function() {  
   console.log(“WebSocket连接发生错误”);  
};  
 
//连接成功建立的回调方法  
websocket.onopen = function() {  
console.log(“WebSocket连接成功”);  
}  
 
//接收到消息的回调方法  
websocket.onmessage = function(event) {
var info=event.data.split(“,”);
if(!$(“div”).is(“.”+info[1])){
$(“#panelBodyWrapper-5”).after(“<div class=’panel_body chat_container “+info[1]+”‘ style=’display:none; transition-property: -webkit-transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) scale(1) translateZ(0px);’>”+
“<div class=’chat_content_group buddy  ‘ _sender_uin=’1564776288’>”+
“<img class=’chat_content_avatar’ src=’${pageContext.request.contextPath }/img/girl.jpeg’ height=’40px’ width=’40px’>”+
“<p class=’chat_nick’>”+info[1]+”</p><p class=’chat_content ‘>”+info[0]+”</p></div></div>”);
$(“.list_white”).find(“li”).each(function(i,dt){
if(info[1]==$(this).children(“p”).html()){
$(this).children(“p”).after(“<span class=’layui-badge’>1</span>”);
};
});
}else{
$(“.”+info[1]).append(“<div class=’chat_content_group buddy ‘ _sender_uin=’1564776288’>”+
“<img class=’chat_content_avatar’ src=’${pageContext.request.contextPath }/img/girl.jpeg’ height=’40px’ width=’40px’>”+
“<p class=’chat_nick’>”+info[1]+”</p><p class=’chat_content ‘>”+info[0]+”</p></div>”);
}
}  
 
//连接关闭的回调方法  
websocket.onclose = function() {  
console.log(“WebSocket连接关闭”);
}  
 
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。  
window.onbeforeunload = function() {  
   //closeWebSocket();  
}  
 
//关闭WebSocket连接  
function closeWebSocket() {  
console.log(“close”);
   websocket.close();  

其中有一块是我拼接的代码看不明白可以不用纠结,到时候结合页面就明白了。这就是大概的代码下面来看看效果图

登录界面,用户名密码随便输就好,没有连接数据库的

大笑

大概效果图就是这样了,第一次发有点不知所措,就这样吧。

点这里可以跳转到人工智能网站

发表评论