webSocket使用教程

webSocket使用教程

Gson简介

GSON是Google开发的Java API,用于转换Java对象和Json对象
gson和其他现有java json类库最大的不同时gson需要序列化的实体类不需要使用annotation来标识需要序列化的字段,同时gson又可以
通过使用annotation来灵活配置需要序列化的字段。在Java开发中,有时需要保存一个数据结构成字符串,可能你会考虑用Json,但是当
Json字符串转换成Java对象时,转换成的是JsonObject,并不是你想要的Class类型的对象。                                                            gson网址:http://blog.csdn.net/qxs965266509/article/details/42774691   http://blog.csdn.net/qxs965266509/article/details/42774691

websocket项目(自己写的,粘贴可用)

工具 版本

Eclipse Mars.2

Tomcat v8.0

Browser Mozilla Firefox v38

创建一个web项目

导入jar包

导入此jar包,用于进行java对象和json串之间的转换

创建webSocket启动文件

package com.ws.config;

import java.util.Set;

import javax.websocket.Endpoint;
import javax.websocket.server.ServerApplicationConfig;
import javax.websocket.server.ServerEndpointConfig;

// webSocket启动文件

public class WebSocketConfig implements ServerApplicationConfig{

    //实现了ServerApplicationConfig接口后,在项目启动时,此类自动执行,这样随着Tomcat的启动来启动WebSocket

    //注解方式的启动
    @Override
    public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> scan) {

        //输出被扫描到的带注解的类的个数
        System.out.println("config....."+scan.size());

        //返回被扫描到的所有带@ServerEndpoint注解的类 方便服务器端注册websocket server
        return scan;
    }

    //接口方式的启动
    @Override
    public Set<ServerEndpointConfig> getEndpointConfigs(Set<Class<? extends Endpoint>> arg0) {

        return null;
    }
}

创建登录页面 (login.jsp页面)

<body>
     <form action="<%=request.getContextPath() %>/LoginServlet" method="get">
                  用户名:<input type="text" name="username">
       <input type="submit" value="登录">
     </form>
</body>

创建登录Servlet

package com.ws.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 类描述:用户登录
 * 作者: xxx
 * 日期: 2016年6月23日 下午8:11:01
 */
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{

        //前台获取登录名
        String username = request.getParameter("username");
        //将登录名放入session中
        request.getSession().setAttribute("username", username);
        //跳转到聊天页面
        response.sendRedirect("chat.jsp");
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{

        doGet(request, response);
    }

}

创建聊天页面 (chat.jsp页面)

<script type="text/javascript">

  //获取用户名
  var username = "${sessionScope.username}";
  //一个ws对象就是一个通信管道
  var ws;
  //服务器端EndPoint的URL
  var target="ws://169.254.187.126:8080/chat/chatSocket?username="+username;

    window.onload=function(){
        //进入聊天页面,就打开socket通道
         // 判断浏览器是IE还是火狐
               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.onmessage=function(event){

                 //将gson转成字符串
                  eval("var msg="+event.data+";");

                 //进入聊天室的欢迎语
                  if(undefined!=msg.welcome){
                      $("#content").append(msg.welcome)
                  }

                 //用户列表
                  if(undefined!=msg.usernames){
                      $("#userList").html("");
                      $(msg.usernames).each(function(){

                          $("#userList").append("<input type=‘checkbox‘ value=‘"+this+"‘>"+this+"<br/>")
                      })
                  }

                 //服务端 发送到客户端的内容
                  if(undefined!=msg.content){
                      $("#content").append(msg.content)
                  }
              }
          }

    //发送方法
    function subSend(){

        var ss = $("#userList :checked");
        var msg = $("#msg").val();

        var obj = null;
        if(ss.size()==0){
            obj={
                    msg:msg,
                    type:1 //1 广播 2 单聊
            }
        }else{
            var chatToWho = $("#userList :checked").val();
            obj={
                    chatToWho:chatToWho,
                    msg:msg,
                    type:2  //1 广播 2 单聊
            }
        }

        //将js对象转成json串
        var str = JSON.stringify(obj);

        ws.send(str);
        $("#msg").val("");
    }

    //退出方法
    function exit(){
        location.href="<%=request.getContextPath()%>/login.jsp";
    }

</script>
</head>
<body>
   <div id="container" style="border:1px solid black; width:400px; height:400px; float:left;">
       <div id="content" style="height:350px;"></div>
       <div style="border-top:1px solid black; width:400px; height:50px;">
           <input id="msg"/><button onclick="subSend();">发送</button>
           <button onclick="exit();">退出</button>
       </div>
   </div>
   <div id="userList" style="border:1px solid black; width:100px; height:400px; float:left;"></div>
</body>

创建Message实体类

public class Message {

    //第一句欢迎语
    private String welcome;

    //进入聊天室的用户列表
    private List<String> usernames;

    //聊天内容(发送者,发送时间,内容)
    private String content;

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public void setContent(String name,String msg) {
        this.content = name +" "+new Date().toLocaleString()+"<br/>"+msg+"<br/>";
    }

    public String getWelcome() {
        return welcome;
    }

    public void setWelcome(String welcome) {
        this.welcome = welcome;
    }

    public List<String> getUsernames() {
        return usernames;
    }

    public void setUsernames(List<String> usernames) {
        this.usernames = usernames;
    }

    //创建Gson对象
    private static Gson gson = new Gson();

    //将java对象转成json串
    public String toJson(){

        String json = gson.toJson(this);
        return json;
    }
    }

创建WebSocket服务端

/**
 * 类描述:聊天室
 * 作者: xxx
 * 日期: 2016年6月21日 下午9:17:37
 */
@ServerEndpoint("/chatSocket")
public class ChatSocket {

    //用户名
    private String username; 

    //session集合
    private static List<Session> sessions = new ArrayList<>();

    //用户列表集合
    private static List<String> names = new ArrayList<String>();

    //用户名与session的Map
    private static Map<String,Session> map = new HashMap<String,Session>();

    /**
     *
     * 方法描述:进入聊天室
     * 作 者:xxx
     * 日 期:2016年6月21日 下午9:08:57
     * @throws UnsupportedEncodingException
     */
    @OnOpen
    public void open(Session session) throws UnsupportedEncodingException{

        //当前websocket的session对象,不是servlet的session,这里的一个session代表一个通信会话!
         String queryString = session.getQueryString();

        //获取当前登录的用户名
         username = queryString.split("=")[1];

        //将用户名放入用户列表集合
         this.names.add(username);

        //将当前session放入session集合
         this.sessions.add(session);

        //将用户名和对应session放入map中
         map.put(username, session);

        //进入聊天室欢迎语
         String msg = "欢迎"+this.username+"进入聊天室!!<br/>";

        //创建message对象
         Message message = new Message();
         message.setWelcome(msg);
         message.setUsernames(this.names);

        //广播
         this.broadcast(sessions, message.toJson());
    }

    //创建Gson对象
    private static Gson gson = new Gson();

    /**
     *
     * 方法描述:进行聊天
     * 作 者:xxx
     * 日 期:2016年6月21日 下午9:08:57
     */
    @OnMessage
    public void message(Session session,String json){

        //将json串转成java对象
        Content content = gson.fromJson(json, Content.class);

        if(content.getType()==1){
            //广播
             Message message = new Message();
             message.setUsernames(this.names);
             message.setContent(this.username,content.getMsg());

             broadcast(this.sessions,message.toJson());
        }else{
            //单聊
            //根据username找到对应的session对象
            String chatToWho = content.getChatToWho();
            Session to_session = map.get(chatToWho);

             Message message = new Message();
             message.setUsernames(this.names);
             message.setContent(this.username,"<font color=‘red‘>"+content.getMsg()+"</font>");

             //向目标发送信息
             try {
                to_session.getBasicRemote().sendText(message.toJson());
            } catch (IOException e) {

                e.printStackTrace();
            }
        }

    }

    /**
     *
     * 方法描述:退出聊天室
     * 作 者:xxx
     * 日 期:2016年6月21日 下午9:08:57
     */
    @OnClose
    public void close(Session session){

        //session集合清除当前用户
        sessions.remove(session);

        //用户列表集合清除当前用户
        names.remove(username);

        //退出聊天室提示语
        String msg = username+"退出聊天室!!<br/>";

        //创建message对象
         Message message = new Message();
         message.setWelcome(msg);
         message.setUsernames(this.names);

        //广播
         broadcast(this.sessions,message.toJson());
    }

    /**
     *
     * 方法描述:广播
     * 作 者:xxx
     * 日 期:2016年6月21日 下午9:08:57
     */
    public void broadcast(List<Session> ss,String msg){

        //遍历session集合
        for (Session session : ss) {
            try {
                //服务端向客户端发送消息
                session.getBasicRemote().sendText(msg);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}
时间: 2024-08-03 07:11:46

webSocket使用教程的相关文章

Spring WebSocket初探2 (Spring WebSocket入门教程)&lt;转&gt;

See more: Spring WebSocket reference整个例子属于WiseMenuFrameWork的一部分,可以将整个项目Clone下来,如果朋友们有需求,我可以整理一个独立的demo出来. 接上一篇:Spring WebSocket初探1 (Spring WebSocket入门教程) WebSocket前端准备 前端我们需要用到两个js文件:sockjs.js和stomp.js SockJS:SockJS 是一个浏览器上运行的 JavaScript 库,如果浏览器不支持 W

WebSocket入门教程(五)-- WebSocket实例:简单多人聊天室

from:https://blog.csdn.net/u010136741/article/details/51612594 [总目录] WebSocket入门教程--大纲 [实例简介] 本文,我们通过nodejs和javascript实现一个网页聊天室的demo.主要包括,聊天,改用户名,查看其他用户在线状态的功能.大致流程为,用户访问网页,即进入聊天状态,成为新游客,通过底部的输入框,可以输入自己想说的话,点击发布,信息呈现给所有在聊天的人的页面.用户可以实时修改自己的昵称,用户离线上线都会

Spring WebSocket初探1 (Spring WebSocket入门教程)&lt;转&gt;

See more: Spring WebSocket reference整个例子属于WiseMenuFrameWork的一部分,可以将整个项目Clone下来,如果朋友们有需求,我可以整理一个独立的demo出来. WebSocket是html5带来的一项重大的特性,使得浏览器与服务端之间真正长连接交互成为了可能,这篇文章会带领大家窥探一下Spring 对WebSocket的支持及使用. 1. 基础环境 快速搭建Spring框架,我们使用Spring boot,这里先不讨论SpringBoot,只知

WebSocket使用教程 - 带完整实例--网址:https://my.oschina.net/u/1266171/blog/357488

什么是WebSocket?看过html5的同学都知道,WebSocket protocol 是HTML5一种新的协议.它是实现了浏览器与服务器全双工通信(full-duplex).HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽并达到实时通讯.现在我们来探讨一下html5的WebSocket 概念 HTML5作为下一代WEB标准,拥有许多引人注目的新特性,如Canvas.本地存储.多媒体编程接口.WebSocket 等等.今天我们就来看看具有"Web TCP"之称的

史上最全的Websocket入门教程

websocket简介websocket是什么? 答: 它是一种网络通信协议,是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.为什么需要websocket? 疑问? 我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处? 答: 因为 HTTP 协议有一个缺陷:通信只能由客户端发起     我们都知道轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开), 因此websocket应运而生. 简介 WebSocket 使得客户端和服务

web新特性 之 WebSocket

详情参见:你真的了解WebSocket吗?     WebSocket系列教程   HTML5新特性之WebSocket WebSocket协议是基于TCP的一种新的协议.WebSocket最初在HTML5规范中被引用为TCP连接,作为基于TCP的套接字API的占位符.它实现了浏览器与服务器全双工(full-duplex)通信.其本质是保持TCP连接,在浏览器和服务端通过Socket进行通信. 服务端与客户端的连接不断开,实现全双工的操作.及服务端或是客户端都会给对方发送消息. WebSocke

Websocket协议的学习、调研和实现

1. websocket是什么 Websocket是html5提出的一个协议规范,参考rfc6455. websocket约定了一个通信的规范,通过一个握手的机制,客户端(浏览器)和服务器(webserver)之间能建立一个类似tcp的连接,从而方便c-s之间的通信.在websocket出现之前,web交互一般是基于http协议的短连接或者长连接. WebSocket是为解决客户端与服务端实时通信而产生的技术.websocket协议本质上是一个基于tcp的协议,是先通过HTTP/HTTPS协议发

以网游服务端的网络接入层设计为例,理解实时通信的技术挑战

本文参考并引用了部分腾讯游戏学院的相关技术文章内容,感谢原作者的分享. 1.前言 以现在主流的即时通讯应用形态来讲,一个完整的即时通讯IM应用其实是即时通信(英文简写:IM=Instant messaging)和实时通信(英文简写:RTC=Real-time communication)2种技术组合在一起的一整套网络通信系统.之所以以IM这个简写代称整个即时通讯软件,其实是历史原因了(因为早期的诸如ICQ这样的即时通讯工具,也就是文字聊天,并没有加入实时音视频这样的实时通信技术),对这个话题有兴

Android websock 应用

websocket 在实际的应用中不仅仅能做聊天应用,还可以利用websocket长连接保持数据的实时更新以及信息的推送. websocket 的实现的关键点 第一个:首先需要引入 java-websocket.jar 包, 这里我使用的版本时1.3.1. 接下来就开始了,不同的业务有不同的需求,我们根据业务需求封装一下websocket 请求 第二:因为我们需要websocket保持与服务端的连接,不仅仅在程序运行时,当锁屏以及程序后台时都需要获取服务端推送的信息,这时候我们就需要把webso