如何创建WebSocket服务端

这篇文章主要介绍“如何创建WebSocket服务端”，在日常操作中，相信很多人在如何创建WebSocket服务端问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何创建WebSocket服务端”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新新互联，凭借10多年的网站设计制作、成都网站制作经验，本着真心·诚心服务的企业理念服务于成都中小企业设计网站有1000+案例。做网站建设，选创新互联公司。

开始之前，我们先来看看我们今天要实现的效果：

如何创建WebSocket服务端  

好了，废话不多说，我们进来看看这个东西要怎么样实现吧！

创建Web项目

这里和上文（WebSocket刨根问底(二)）一样，web项目创建成功之后，还是要我们先手动添加websocket的jar包进来。

创建HTML页面

页面的效果效果小伙伴们刚才都看到了，我这里就直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ws页面</title>
    <script src="jquery-3.2.1.js"></script>
</head>
<body>
<input type="text" placeholder="请输入您的昵称" id="nickname"><input type="button" value="连接" id="btnClick1">
</div>
<div id="resultDiv"></div>
<div><input type="text" id="msg"><input type="button" value="发送" id="btnClick2" disabled="disabled"></div>
<script>
    var webSocket;
    $("#btnClick2").click(function () {
        var msg = $("#msg").val();
        $("#msg").val('');
        webSocket.send(msg)
    });
    $("#btnClick1").click(function () {
        var nickname = $("#nickname").val();
        if(nickname==null||nickname=='') {
            alert("必须输入昵称");
            return;
        }
        $("#btnClick2").removeAttr("disabled");
        $(this).attr("disabled", "disabled");
        $("#resultDiv").append("<p>开始连接服务端!</p>");
        webSocket = new WebSocket("ws://localhost/myws2/"+nickname);
        webSocket.onerror = function (event) {
            $("#resultDiv").append("<p>onerror:" + event.data + "</p>");
        }
        webSocket.onopen = function (event) {
            $("#resultDiv").append("<p>连接成功！</p>");
        }
        webSocket.onmessage = function (event) {
            $("#resultDiv").append("<p>" + event.data + "</p>");
        }
    });
</script>
</body>
</html>

关于这段HTML代码，我说如下几点：

1.一开始发送按钮处于不可用状态，必须先连接
2.连接时必须先输入昵称，如果不输入昵称则弹出提示
3.连接成功之后连接按钮处于不可点击状态而发送按钮处于可点击状态
4.在连接按钮的点击事件中初始化WebSocket对象以及WebSocket中涉及到的一些方法的初始化
5.所有的信息（连接成功，连接出错以及接收到消息）最后都显示在resultDiv中
6.连接地址是动态变化的，最后的字符是连接的用户名

创建WebSocket服务端

由于我们这里要做的是群聊，所以服务端的主要功能就是接收客户端传来的消息并将之广播给所有的客户端。服务端代码如下：

@ServerEndpoint("/myws2/{nickname}")
public class WebSocketServer2 {
    private String nickname;
    private Session session;
    private static final Set<WebSocketServer2> WEB_SOCKET_SERVER_2_SET = new CopyOnWriteArraySet<WebSocketServer2>();

    @OnMessage
    public void onMessage(String message, @PathParam(value = "nickname") String nickname) throws IOException {
        System.out.println("收到了客户端发来的消息：" + message);
        sendText(nickname+"发来了:"+message);
    }

    private static void sendText(String msg) {
        for (WebSocketServer2 webSocketServer2 : WEB_SOCKET_SERVER_2_SET) {
            try {
                synchronized (webSocketServer2) {
                    webSocketServer2.session.getBasicRemote().sendText(msg);
                }
            } catch (IOException e) {
                WEB_SOCKET_SERVER_2_SET.remove(webSocketServer2);
                try {
                    webSocketServer2.session.close();
                } catch (IOException e1) {
                }
                sendText(webSocketServer2.nickname + "同学已经下线");
            }
        }
    }

    @OnOpen
    public void onOpen(Session session, @PathParam(value = "nickname") String nickname) throws IOException {
        this.nickname = nickname;
        this.session = session;
        WEB_SOCKET_SERVER_2_SET.add(this);
        sendText(nickname + "进入房间");
        StringBuffer sb = new StringBuffer();
        for (WebSocketServer2 webSocketServer2 : WEB_SOCKET_SERVER_2_SET) {
            sb.append(webSocketServer2.nickname).append(";");
        }
        sendText("当前房间有："+sb.toString());
    }

    @OnClose
    public void onClose(Session session) throws IOException {
        WEB_SOCKET_SERVER_2_SET.remove(this);
        sendText(this.nickname+"童鞋已下线");
    }
}

关于这个服务端我解释如下几点：

1.第一行的代码表示服务端的名字，但是名字里边有一个{nickname},表示获取服务端传递来的最后一个参数，在方法里边可以通过@PathParam来获取，这个和SpringMVC的参数注解如出一辙
2.第三行和第四行创建了两个对象，因为当客户端脸上服务端之后，一个客户端将对应一个WebSocketServer2对象，我需要将每一个客户端的有关信息保存下来，因此创建出nickname表示该对象对应的客户端的用户昵称，session表示该对象对应的客户端的session
3.第五行创建一个Set集合，该集合是static final类型的，表示不管WebSocketServer2的对象有多少个，WEB_SOCKET_SERVER_2_SET集合始终是同一个，该集合主要用来保存所有连接的客户端对应的WebSocketServer2对象
4.第30行到41行是open方法的逻辑，该方法有两个参数，第一个session，第二个nickname，nickname参数有一个注解@PathParam表示该参数的值就是连接地址里边的最后一个字符串，这个参数是可选的。在该方法里，首先将nickname和session赋值给对应的全局变量，然后将当前对象添加到set集合中，然后调用sendText方法发送一条消息，告诉所有的客户端XXX进入房间啦，最后遍历set集合中的所有用户，拿到所有用户的用户名，再告诉所有客户端当前的房间都有谁谁谁。
5.第13-28行的sendText方法是一个自定义的静态方法，该方法主要用来向所有的客户端广播消息，该方法的基本逻辑就是遍历set集合，拿到set集合中的每一个对象和每一个对象中的session，再利用session向对应的客户端发送消息，如果消息发送失败，则将该用户从集合中移除，同时告诉剩余的客户端某某人已经下线。
6.第7-10行的代码主要用来处理客户端发送来的消息，默认的String类型的参数表示客户端发送来的消息，其他的String类型参数都要加上注解才可以，我们这里第一个参数表示客户端发送来的消息，第二个参数表示发送客户端消息的用户昵称，这里收到消息之后，再利用sendText广播给所有用户。
7.第43行到47行表示当其中一个用户下线了了会回调的close方法，在这里方法里首先从集合中移除该客户端对应的WebSocketServer2对象，然后广播一条消息将该用户下线的事告诉所有人。

到此，关于“如何创建WebSocket服务端”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

本文名称：如何创建WebSocket服务端
标题链接：https://www.cdcxhl.com/article36/jjpgpg.html

成都网站建设公司_创新互联，为您提供动态网站、网站维护、手机网站建设、网站制作、微信公众号、网站设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

成都app开发公司

自适应网站知识

各行业网站