WebSocket实现多人在线聊天功能

标签：就是   roc   welcome   undefined   catch   nop   messages   session   name   

WebSocket是现在最流行的实现多人在线聊或者私聊的技术，它可以实现客户端到客户端的通信，和以往的TCP和UDP不一样，它俩是客户端到服务端的通信，而且服务端不能直接给客户端发送消息，但是WebSocket不仅可以客户端和客户端之间通信，服务端也可以直接发送消息给客户端。
下面实现的一个多人的在线聊天室，前台聊天框是在网上找的模板，该聊天室具有的功能如下

1. 当一个客户端进入之后，其他客户端会看到系统消息提示（某某某进入了聊天室）
2. 客户端发送消息，每个客户端都可以收到消息
3. 当一个客户端退出或者关闭聊天室网页时，其他客户端会看到系统消息提示（某某某退出了聊天室）

下面是代码，这里说明一点
里面的注解像@ServerEndpoint，@OnMessage，@OnClose，@OnOpen等都是javax支持的，还有下面的Session不是HTTP的Session,都是属于javax.websocket的。

项目是一个简单的Web项目，什么框架也没用，只是复制了一个html页面到WebContent文件夹。

因为web.xml文件的配置，所以把项目部署到Tomcat上面直接运行，输入路径localhost:8080/chatroom即可，默认跳转到index.html页面，也就是聊天框的页面。

index.html

至于html页面也不用我给你们了吧，自己可以在网上面找聊天模板，太多了。
直接讲js吧？要模板的到最下面给你们链接去下载好啦，记得好评兄弟盟，如果帮到你们的话就给宝宝扣个1可否？

js代码

Java代码

package com.fjf.chat;

import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
/**
 * 聊天室的服务端程序
 * @author Administrator
 *
 */
//声明websocket某个服务端的地址
@ServerEndpoint("/charRoomServer")
public class ChatRoomServer {
    private boolean firstFlag=true;
    private Session session;
    private String userName;
    //记录此次聊天室的服务端有多少个连接
    //key代表此次客户端的session的id，value代表此次连接对象
    private static final HashMap connectMap=new HashMap();
    //保存所有用户昵称信息
    //key是session的id，value是用户昵称
    private static final HashMap userMap=new HashMap();
    
    //服务端收到客户端的连接请求，连接成功后会执行此方法
    @OnOpen
    public void start(Session session) {
        this.session=session;
        connectMap.put(session.getId(), this);
    }
    
    //客户端发来的信息，服务端接收
    @OnMessage
    public void chat(String clientMessage,Session session) {
        //firstFlag为true是第一次进入，第二次进入之后设为false
        ChatRoomServer client=null;
        if(firstFlag) { 
            this.userName=clientMessage;
            //将新进来的用户保存到用户map
            userMap.put(session.getId(), userName);
            //构造发送给客户端的提示信息
            String message=htmlMessage("系统消息：",userName+"进入聊天室");
            //将消息广播给给所有的用户
            //Map.keySet()方法是获取到Map集合的所有的key值
            for(String connectKey:connectMap.keySet()) {
                client=(ChatRoomServer) connectMap.get(connectKey);
                //给对应的web端发送一个文本信息
                try {
                    client.session.getBasicRemote().sendText(message);
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
                firstFlag=false;
            }else {
                //构造发送给客户端的提示信息
                String message=htmlMessage(userMap.get(session.getId()),clientMessage);
                //将消息广播给给所有的用户
                //Map.keySet()方法是获取到Map集合的所有的key值
                for(String connectKey:connectMap.keySet()) {
                    client=(ChatRoomServer) connectMap.get(connectKey);
                    //给对应的web端发送一个文本信息
                    try {
                        client.session.getBasicRemote().sendText(message);
                    } catch (IOException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }
            }
        }
    }   
    /**
     * 前台js的ws.close事件，会触发后台的标注onClose的方法
     */
    @OnClose
    public void close(Session session) {
        //当某个用户退出时，对其他用户进行广播
        String message=htmlMessage("系统消息", userMap.get(session.getId())+"退出了聊天室");
        userMap.remove(session.getId());
        connectMap.remove(session.getId());
        //将消息广播给给所有的用户
        //Map.keySet()方法是获取到Map集合的所有的key值
        ChatRoomServer client=null;
        for(String connectKey:connectMap.keySet()) {
            client=(ChatRoomServer) connectMap.get(connectKey);
            //给对应的web端发送一个文本信息
            try {
                client.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
    }
    }
    /**
     * 渲染页面，把信息构造好标签再发送
     */
    public String htmlMessage(String userName,String message) {
        StringBuffer stringBuffer=new StringBuffer();
        SimpleDateFormat sf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        stringBuffer.append("");
        stringBuffer.append(""+sf.format(new Date())+"");
        stringBuffer.append("
");
        stringBuffer.append("
"+userName+"
");
        stringBuffer.append("
");
        stringBuffer.append("
");
        stringBuffer.append("
");
        stringBuffer.append("
"+message+"
");
        stringBuffer.append("
");
        stringBuffer.append("");
        
        return stringBuffer.toString();
    }
}

然后聊天室就完工啦！

WebSocket实现多人在线聊天功能

标签：就是   roc   welcome   undefined   catch   nop   messages   session   name   

原文地址：https://www.cnblogs.com/fantongxue/p/12443485.html