WebSocket实战

最新推荐文章于 2022-03-03 10:27:28 发布

chengqiuming

最新推荐文章于 2022-03-03 10:27:28 发布

阅读量159

点赞数

分类专栏： HTML5 文章标签： HTML

本文链接：https://blog.csdn.net/chengqiuming/article/details/100592295

版权

HTML5 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

一服务端代码

package lee;

import java.io.IOException;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;

import javax.websocket.*;
import javax.websocket.server.*;


@ServerEndpoint(value = "/websocket/chat")
public class ChatEntpoint
{
    private static final String GUEST_PREFIX = "访客";
    private static final AtomicInteger connectionIds = new AtomicInteger(0);
    // 定义一个集合，用于保存所有接入的WebSocket客户端
    private static final Set<ChatEntpoint> clientSet =
        new CopyOnWriteArraySet<>();
    // 定义一个成员变量，记录WebSocket客户端的聊天昵称
    private final String nickname;
    // 定义一个成员变量，记录与WebSocket之间的会话
    private Session session;
    public ChatEntpoint()
    {
        nickname = GUEST_PREFIX + connectionIds.getAndIncrement();
    }
    // 当客户端连接进来时自动激发该方法
    @OnOpen
    public void start(Session session)
    {
        this.session = session;
        // 将WebSocket客户端会话添加到集合中
        clientSet.add(this);
        String message = String.format("【%s %s】"
            , nickname, "加入了聊天室！");
        // 发送消息
        broadcast(message);
    }
    // 当客户端断开连接时自动激发该方法
    @OnClose
    public void end()
    {
        clientSet.remove(this);
        String message = String.format("【%s %s】"
            , nickname, "离开了聊天室！");
        // 发送消息
        broadcast(message);
    }
    // 每当收到客户端消息时自动激发该方法
    @OnMessage
    public void incoming(String message)
    {
        String filteredMessage = String.format("%s: %s"
            , nickname, filter(message));
        // 发送消息
        broadcast(filteredMessage);
    }
    // 当客户端通信出现错误时，激发该方法
    @OnError
    public void onError(Throwable t) throws Throwable
    {
        System.out.println("WebSocket服务端错误 " + t);
    }
    // 实现广播消息的工具方法
    private static void broadcast(String msg)
    {
        // 遍历服务器关联的所有客户端
        for (ChatEntpoint client : clientSet)
        {
            try
            {
                synchronized (client)
                {
                    // 发送消息
                    client.session.getBasicRemote().sendText(msg);
                }
            }
            catch (IOException e)
            {
                System.out.println("聊天错误，向客户端 "
                    + client + " 发送消息出现错误。");
                clientSet.remove(client);
                try
                {
                    client.session.close();
                }
                catch (IOException e1){}
                String message = String.format("【%s %s】",
                    client.nickname, "已经被断开了连接。");
                broadcast(message);
            }
        }
    }
    // 定义一个工具方法，用于对字符串中的HTML字符标签进行转义
    private static String filter(String message)
    {
        if (message == null)
            return null;
        char content[] = new char[message.length()];
        message.getChars(0, message.length(), content, 0);
        StringBuilder result = new StringBuilder(content.length + 50);
        for (int i = 0; i < content.length; i++)
        {
            // 控制对尖括号等特殊字符进行转义
            switch (content[i])
            {
                case '<':
                    result.append("&lt;");
                    break;
                case '>':
                    result.append("&gt;");
                    break;
                case '&':
                    result.append("&amp;");
                    break;
                case '"':
                    result.append("&quot;");
                    break;
                default:
                    result.append(content[i]);
            }
        }
        return (result.toString());
    }
}

二客户端代码

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> 使用WebSocket通信 </title>
    <script type="text/javascript">
        // 创建WebSocket对象
        var webSocket = new WebSocket("ws://127.0.0.1:8080/WebSocket/websocket/chat");
        var sendMsg = function()
        {
            var inputElement = document.getElementById('msg');
            // 发送消息
            webSocket.send(inputElement.value);
            // 清空单行文本框
            inputElement.value = "";
        }
        var send = function(event)
        {
            if (event.keyCode == 13)
            {
                sendMsg();
            }
        };
        webSocket.onopen = function()
        {
            // 为onmessage事件绑定监听器，接收消息
            webSocket.onmessage= function(event)
            {
                var show = document.getElementById('show')
                // 接收、并显示消息
                show.innerHTML += event.data + "<br/>";
                show.scrollTop = show.scrollHeight;
            }
            document.getElementById('msg').onkeydown = send;
            document.getElementById('sendBn').onclick = sendMsg;
        };
        webSocket.onclose = function ()
        {
            document.getElementById('msg').onkeydown = null;
            document.getElementById('sendBn').onclick = null;
            Console.log('WebSocket已经被关闭。');
        };
    </script>
</head>
<body>
<div style="width:600px;height:240px;
    overflow-y:auto;border:1px solid #333;" id="show"></div>
<input type="text" size="80" id="msg" name="msg" placeholder="输入聊天内容"/>
<input type="button" value="发送" id="sendBn" name="sendBn"/>
</body>
</html>

三测试

chengqiuming

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebSocket实战

一服务端代码package lee;import java.io.IOException;import java.util.Set;import java.util.concurrent.CopyOnWriteArraySet;import java.util.concurrent.atomic.AtomicInteger;import javax.websocket.*;...
复制链接

扫一扫