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>