WebSocket入门

最新推荐文章于 2025-08-19 09:42:46 发布

原创最新推荐文章于 2025-08-19 09:42:46 发布 · 359 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #服务器

本文介绍了WebSocket协议如何解决传统HTTP协议无法实现服务器主动推送的问题，并提供了JavaWeb环境下WebSocket的具体实现案例。

1.WebSocket简单介绍
　WebSocket协议被提出，它实现了浏览器与服务器的全双工通信，扩展了浏览器与服务端的通信功能，使服务端也能主动向客户端发送数据。
传统的HTTP协议是无状态的，每次请求（request）都要由客户端（如浏览器）主动发起，服务端进行处理后返回response结果，而服务端很难主动向客户端发送数据；这种客户端是主动方，服务端是被动方的传统Web模式对于信息变化不频繁的Web应用来说造成的麻烦较小，而对于涉及实时信息的Web应用却带来了很大的不便，如带有即时通信、实时数据、订阅推送等功能的应用。在WebSocket规范提出之前，开发人员若要实现这些实时性较强的功能，经常会使用折衷的解决方法：轮询（polling）和Comet技术。其实后者本质上也是一种轮询，只不过有所改进。

　　轮询是最原始的实现实时Web应用的解决方案。轮询技术要求客户端以设定的时间间隔周期性地向服务端发送请求，频繁地查询是否有新的数据改动。明显地，这种方法会导致过多不必要的请求，浪费流量和服务器资源。
　伴随着HTML5推出的WebSocket，真正实现了Web的实时通信，使B/S模式具备了C/S模式的实时通信能力。WebSocket的工作流程是这样的：浏览器通过JavaScript向服务端发出建立WebSocket连接的请求，在WebSocket连接建立成功后，客户端和服务端就可以通过 TCP连接传输数据。因为WebSocket连接本质上是TCP连接，不需要每次传输都带上重复的头部数据，所以它的数据传输量比轮询和Comet技术小了很多。本文不详细地介绍WebSocket规范，主要介绍下WebSocket在Java Web中的实现。

　　JavaEE 7中出了JSR-356:Java API for WebSocket规范。不少Web容器，如Tomcat,Nginx,Jetty等都支持WebSocket。Tomcat从7.0.27开始支持 WebSocket，从7.0.47开始支持JSR-356，下面的Demo代码也是需要部署在Tomcat7.0.47以上的版本才能运行。
二.WebSocket示例
1.新建web项目

2.pom.xml添加依赖包

<dependency>
    <groupId>org.apache.tomcat</groupId>
    <artifactId>tomcat-websocket-api</artifactId>
    <version>7.0.47</version>
    <scope>provided</scope>
    </dependency>

3.服务端代码：

package com.roby.endpoint.heloword;
import java.io.IOException;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/hello")
public class Helloword {
    private Session  session ;
    public Helloword() {
        System.out.println("创建了一个 helloWorld实例！@！！！");
    }
    @OnOpen
    public void  open(Session  session ){
        System.out.println("建立了一个 webSocket通道！！！  sid:"+session.getId());
        this.session = session;
    }

    @OnClose
    public void close(Session session){
        System.out.println("退出"+session.getId());
    }
    @OnMessage
    public   void  receiveMsg(Session session,String msg ){
            System.out.println("收到信息啦!sid:"+session.getId()+"消息："+msg);
            try {
                for(int i = 0;i<10;i++){
                    session.getBasicRemote().sendText("服务器端"+i+msg);
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
    }
    }

页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
    <script type="text/javascript">
    ws_init();
        function  ws_init(){
             var target="ws://localhost:8080/hello";
              if ('WebSocket' in window) {
                  ws = new WebSocket(target);
              } else if ('MozWebSocket' in window) {
                  ws = new MozWebSocket(target);
              } else {
                  alert('WebSocket is not supported by this browser.');
                  return;
              }
              ws.onopen=function(){
                console.info("webSocket通道建立成功！！！"); 
                 ws.send("");
              };
              ws.onmessage=function(event){
                console.info(event.data);  
              };
              ws.onclose=function(event){
                    console.info(data);  
               };
            }
            function  ws_send(){
                var msg = document.getElementById("msg");
            }
    </script>
  </head>
  <body>
        <hr/>
        <input id="msg"  />
        <button  onclick="ws_send();">send</button>


  </body>
</html>