WebSocket聊天小例子(附源码)

发布时间:2022-10-08 09:30

WebSocket聊天小例子(附源码)

还记得之前我们用c#写过一个聊天室,但是是cs的,我们都知道现在流行的是bs架构,所以很相似C#用的是socket底层是tcp和udp而websocket其实就是在http的基础上模仿tcp和udp握手和挥手

基于C#的socket聊天室(附源码): https://blog.csdn.net/hello_list/article/details/124075029

原理嘛都差不多,要我说一个文章讲原理不如直接上例子上代码的方便,讲解一下这个小例子就懂了;

这里呢我们使用的是tomcat自带的依赖,所以不用导入,还有一种方法是spring的,这里就不说了;

体验

我们先尝试体验下效果

将Web项目运行起来,一个特别简单的页面,其实页面我们可以去扒就可以,比如csdn的私信页面,拿去用就行,功能还那么个功能,但是我这里主要是功能,就没有扒页面,看完这个例子,完全可以去做一个csdn这样的私信功能;

先看下我这个简陋的页面

WebSocket聊天小例子(附源码)_第1张图片

我们再看下功能,可简单了,会用吧

输入id点击获取连接;连接成功之后,这个时候id就固定了,我这里直接锁住了

WebSocket聊天小例子(附源码)_第2张图片

我们再开两个,三个用户我们就连接成功了;

WebSocket聊天小例子(附源码)_第3张图片

这里也可以看下后端日志

WebSocket聊天小例子(附源码)_第4张图片

我们可以给在线的用户发送消息,只需要输入对方id,我这里就试着互相发了几条消息:

WebSocket聊天小例子(附源码)_第5张图片

功能到这里就结束了,我们看下是怎么实现的,简单理解下,可简单了;

服务端

服务端代码,一个java文件就搞定

package servlet;

import java.io.IOException;
import java.util.Map;
import java.util.Scanner;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicInteger;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;

@ServerEndpoint("/webSocket/{sid}")
public class TestWebSocket {

    // 静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
    private static AtomicInteger onlineNum = new AtomicInteger();

    // concurrent包的线程安全Set,用来存放每个客户端对应的WebSocketServer对象。
    private static ConcurrentHashMap<String, Session> sessionPools = new ConcurrentHashMap<>();

    // 发送消息
    public void sendMessage(Session session, String message) throws IOException {
        if (session != null) {
            synchronized (session) {
                // System.out.println("发送数据:" + message);
                session.getBasicRemote().sendText(message);
            }
        }
    }

    @OnOpen
    public void onOpen(Session session, @PathParam(value = "sid") String sid) throws IOException {
        System.out.println("新连接");
        sessionPools.put(sid, session);
        addOnlineCount();
        System.out.println(sid + "加入webSocket!当前人数为" + onlineNum);
        sendMessage(session, "欢迎" + sid + "加入连接!");
    }

    @OnClose
    public void onClose() {
        subOnlineCount();
        System.out.println("连接关闭");
    }

    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        System.out.println("收到消息");
        System.out.println(message);
        //		session.getBasicRemote().sendText("你好,我是服务端");
        JSONObject jsonObject = (JSONObject) JSON.parse(message);
        System.out.println(jsonObject);
        //		sendMessage(sessionPools.get(jsonObject.get("tsid")), String.valueOf(jsonObject.get("sid"))+"--给你发来消息:"+String.valueOf(jsonObject.get("txt")));
        //		System.out.println( String.valueOf(jsonObject.get("sid"))+"发送消息成功");
        JSONObject jsonObject2 = new JSONObject();
        jsonObject2.put("fromid", String.valueOf(jsonObject.get("sid")));
        jsonObject2.put("text", String.valueOf(jsonObject.get("txt")));
        sendMessage(sessionPools.get(jsonObject.get("tsid")), jsonObject2.toJSONString());
    }

    @OnError
    public void onError(Session session, Throwable error) {
        error.printStackTrace();
    }

    // 增加在线人数
    public static void addOnlineCount() {
        onlineNum.incrementAndGet();
    }

    // 减少在线人数
    public static void subOnlineCount() {
        onlineNum.decrementAndGet();
    }

}

客户端,其实就是网页端

所以说前后就两个文件,这里我们在客户端创建一个websocket然后去连接服务端即可;




    
        
        
        
        Document
    

    

        
        

        

消息输入:
消息接收人的id:

以下是消息区域:

小结

看到这里的同学都知道,博主就喜欢给大家留出优化空间,比如根据这个实现下csdn的私信功能,把页面拔下来都是现成的,对吧,所以都看到这里了,还不留个关注,点个赞吗,bye~

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号