WebSocket基础使用

最新推荐文章于 2024-04-02 10:16:39 发布

SeeYourself

最新推荐文章于 2024-04-02 10:16:39 发布

阅读量384

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/SeeYourself/article/details/75507961

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

下面为大家做一个简单介绍，列出核心代码，具体实现在文末附上：

服务器端：

@ServerEndpoint("/chat") 对外提供的访问地址

@OnOpen 当有客户端与服务器建立连接时，执行的具体操作
	public void connection(Session session){}

@OnMessage 从客户端接收的信息时，执行的具体操作
   	public void handleMessage(String text,Session session){}

@OnClose 当断开连接时
   	public void close(Session session){}

这些就是服务器的最核心代码

客户端，我使用了JQuery，大家记得导包。

ws=new WebSocket('ws://localhost:8080/项目名称/chat')

	//与服务器建立连接，其中chat是之前通过注解设置的服务器对外访问名称
	ws.onopen=function () {
   		当与服务器建立连接时，客户端操作
	}
	ws.onmessage=function (event) {
   		当客户端收到信息时，进行的操作
	}
	ws.onclose=function () {}
	ws.onerror=function () {}

	ws.send(); //向服务器发送信息

	ws.close();//断开连接

这些就是WebSocket的基础知识和核心代码，下面附上一个简易聊天室的代码

@ServerEndpoint("/chat")
public class ChatWebSocket {
    static List<Session> all=new ArrayList<>();//存放所有连接的session对象
    @OnOpen
    public void connection(Session session){
        all.add(session);
    }
    @OnMessage
    public void handleMessage(String text,Session session){
        send1(text);//接收到某以客户端请求时，调用send1方法
    }
    @OnClose
    public void close(Session session){
        all.remove(session);//当断开连接，就从集合中移除
    }
    
    private void send1(String text) {
        for (Session s : all) {//向所有连接的session发送消息
            try {
                s.getBasicRemote().sendText(text);//向session对应的客户端发送
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

客户端代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="images/jquery-3.2.1.js"></script>
<script>
    $(function () {
        var ws=null;
        $('#kai').click(function () {
            ws=new WebSocket('ws://localhost:8080/web136/chat')//建立一个与服务器的连接
            ws.onopen=function () {
                $('#msg').append("<div>已连接</div>")
            }
            ws.onmessage=function (event) {
                $('#msg').append("<div>"+event.data+"</div>")
            }
            ws.onclose=function () {
                $('#msg').append("<div>关闭连接</div>")
            }
            ws.onerror=function () {
                $('#msg').append("<div>有错</div>")
            }
        })
        $('#fa').click(function () {
            ws.send($('#txt').val());//向服务器发送信息
            $('#txt').val('');//将消息栏清空
        })
        $('#guan').click(function () {
            ws.close();//断开该连接
            ws=null;
        })
    })
</script>
<body>
<div id="msg">
</div>
<textarea id="txt"></textarea>
<button id="fa">发送</button>
<br />
<button id="kai">连接</button>
<button id="guan">关闭</button>
</body>
</html>