WebSocket简介

WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。
特点:
事件驱动
异步
使用ws或者wss协议的客户端socket

能够实现真正意义上的推送功能

缺点：

少部分浏览器不支持，浏览器支持的程度与方式有区别。

下面进行代码和图解:

我现在使用idea进行创建一个项目,下面会给实例项目

简单介绍WebSocket客户端服务器端

WebSocket客户端

websocket允许通过JavaScript建立与远程服务器的连接，从而实现客户端与服务器间双向的通信。在websocket中有两个方法：　　
　　　　1、send() 向远程服务器发送数据
　　　　2、close() 关闭该websocket链接
　　websocket同时还定义了几个监听函数　　　　
　　　　1、onopen 当网络连接建立时触发该事件
　　　　2、onerror 当网络发生错误时触发该事件
　　　　3、onclose 当websocket被关闭时触发该事件
　　　　4、onmessage 当websocket接收到服务器发来的消息的时触发的事件，也是通信中最重要的一个监听事件。msg.data
　　websocket还定义了一个readyState属性，这个属性可以返回websocket所处的状态：
　　　　1、CONNECTING(0) websocket正尝试与服务器建立连接
　　　　2、OPEN(1) websocket与服务器已经建立连接
　　　　3、CLOSING(2) websocket正在关闭与服务器的连接
　　　　4、CLOSED(3) websocket已经关闭了与服务器的连接

　　websocket的url开头是ws，如果需要ssl加密可以使用wss，当我们调用websocket的构造方法构建一个websocket对象（new WebSocket(url)）的之后，就可以进行即时通信了。

我使用的是idea进行演示

简单的聊天

客户端代码如下:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width" />

    <title>聊天室</title>

</head>

<style>

    body{text-align: center;}

    #div1{width:802px;height: 500px;border:1px solid red;margin: auto}

    #cs{width:650px;height: 350px;border:1px solid red;float: left;}

    #cs2{width: 148px;height: 350px;border: 1px solid red;float: left;}

    p{text-align: left}

    #ss{    height: 109px;

        width: 796px;}

    #cs,#cs2{OVERFLOW: auto;}

    #btnSend{float: right;width: 100px;height: 30px;}

</style>

<body>

<h2>小小聊天室</h2>

<input type="button" id="btnConnection" value="打开连接" />

<input type="button" id="btnClose" value="关闭连接" />

<div id="div1">

    <div id="cs" ></div>

    <div id="cs2"></div>

    <textarea id="ss"></textarea>

   <br/> <input type="button" id="btnSend" value="发送" />

</div>

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

    var socket;

    if(typeof(WebSocket) == "undefined") {

        console.log("您的浏览器不支持WebSocket");

    }

    $("#btnSend").attr("disabled","disabled");//禁用

    $("#btnClose").attr("disabled","disabled");//禁用

    var name;

    $("#btnConnection").click(function() {

       name= prompt("请输入发送的名称:");

        if(name!=null){

            $("#btnConnection").attr("disabled","disabled");//禁用

            //实现化WebSocket对象，指定要连接的服务器地址与端口

            //socket = new WebSocket("ws://169.254.105.218:8080/ws/"+name);

            //本机

            socket = new WebSocket("ws://localhost/ws/"+name);

            //打开事件

            socket.onopen = function() {

                $("#btnSend").attr("disabled","");//禁用

                $("#btnClose").attr("disabled","");//禁用

                $("#cs2").append($("<p/>").html(name+"：连接成功"));

            };

            //获得消息事件

            socket.onmessage = function(msg) {

                $("#cs").append($("<p/>").html(msg.data));

            };

            //关闭事件

            socket.onclose = function() {

                $("#btnSend").attr("disabled","disabled");//禁用

                $("#btnConnection").attr("disabled","");//禁用

                $("#btnClose").attr("disabled","disabled");//禁用

                $("#cs2").append($("<p/>").html(name+"：已关闭"));

            };

            //发生了错误事件

            socket.onerror = function() {

                $("#cs2").append($("<p/>").html("已关闭发生了错误"));

            }

        }

    });

    //发送消息

    $("#btnSend").click(function() {

        socket.send(document.getElementById("ss").value);

        $("#ss").val("");

    });

    //关闭

    $("#btnClose").click(function() {

        socket.close();

    });

</script>

</body>

</html>

WebSocket服务器端

JSR356定义了WebSocket的规范，Tomcat7中实现了该标准。JSR356 的 WebSocket 规范使用 javax.websocket.*的 API，可以将一个普通 Java 对象（POJO）使用 @ServerEndpoint 注释作为 WebSocket 服务器的端点。

服务器代码如下:

package com;

import java.io.IOException;

import java.util.HashMap;

import java.util.HashSet;

import java.util.Map;

import java.util.Set;

import javax.websocket.CloseReason;

import javax.websocket.OnClose;

import javax.websocket.OnError;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.PathParam;

import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/ws/{user}")

public class SServlet {

    private String currentUser;

    private static Set<Session> sessions = new HashSet<>();

    //连接打开时执行

    @OnOpen

    public void onOpen(@PathParam("user") String user, Session session) {

        currentUser = user;

        //System.out.println("Connected ... " + session.getId());

        sessions.add(session);

        System.out.println(user);

    }

    //收到消息时执行

    @OnMessage

    public String onMessage(String message, Session session) throws IOException {

        System.out.println(currentUser + "：" + message);

        //发送给所有人

        for (Session s : sessions) {

            if (s.isOpen()) {

                s.getBasicRemote().sendText(currentUser+"说:"+message);

            }

        }

        return null;

    }

    //连接关闭时执行

    @OnClose

    public void onClose(Session session, CloseReason closeReason) {

        System.out.println(String.format("Session %s closed because of %s", session.getId(), closeReason));

    }

    //连接错误时执行

    @OnError

    public void onError(Throwable t) {

        t.printStackTrace();

    }

}

需要引用websocket包：官网地址：https://mvnrepository.com/artifact/javax.websocket/javax.websocket-api

或者直接下载

项目实例和包地址:https://github.com/weibanggang/Message_push

高手教师详细(果哥):https://www.cnblogs.com/best/p/5695570.html

WebSocket消息推送(实现进行聊天)和WebSocket简介的更多相关文章

【WebSocket】WebSocket消息推送
准备使用WebSocket实现Java与Vue或者安卓间的实时通信,实现私密聊天.群聊.查询下资料备用. WebSocket客户端 websocket允许通过JavaScript建立与远程服务器的连接 ...
node.js Websocket消息推送---GoEasy
Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送速度快,代码简单易懂上手快浏览器兼容性:GoEasy推送支持websocket ...
C(++) Websocket消息推送---GoEasy
Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送速度快,代码简单易懂上手快浏览器兼容性:GoEasy推送支持websocket ...
SSE(Server-sent events)技术在web端消息推送和实时聊天中的使用
最近在公司闲着没事研究了几天,终于搞定了SSE从理论到实际应用,中间还是有一些坑的. 1.SSE简介 SSE(Server-sent events)翻译过来为:服务器发送事件.是基于http协议,和W ...
websocket消息推送实现
一.服务层 package com.demo.websocket; import java.io.IOException; import java.util.Iterator; import java ...
WebSocket消息推送
WebSocket协议是基于TCP的一种新的网络协议,应用层,是TCP/IP协议的子集. 它实现了浏览器与服务器全双工(full-duplex)通信,客户端和服务器都可以向对方主动发送和接收数据.在J ...
spring boot下WebSocket消息推送(转)
原文地址:https://www.cnblogs.com/betterboyz/p/8669879.html WebSocket协议 WebSocket是一种在单个TCP连接上进行全双工通讯的协议.W ...
spring+rabbitmq+stomp搭建websocket消息推送（非spring boot方式）
前言: 两年前做过spring+activemq+stomp的ws推送,那个做起来很简单,但现在公司用的mq中间件是rabbitmq,因此需要通过rabbitmq去做ws通信.仔细搜了搜百度/谷歌,网 ...
spring boot下WebSocket消息推送
WebSocket协议 WebSocket是一种在单个TCP连接上进行全双工通讯的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范.WebSo ...

随机推荐

nodejs(二) --- 重要知识点回顾
1. 运行一个nodejs文件, 如一个js文件中只含有console.log("hello world");的文件,我们再git里运行node,即 node hello.js 即 ...
PHP unlink删除本地中文名称的文件
由于编码不一样,用unlink()方法删除本地中文名称的材料之前,必须先转码,才能删除成功. 核心代码如下: //删除本地的议题材料(本地上传的材料) if($local_ma ...
获取top10
ips = ['', '123.125.71.49', '164.132.161.48', '217.182.132.55', '217.182.132.55', '217.182.132.94', ...
sql查询时，根据特定的条件给表的某一个字段赋值
先讲一下需要这个需求的情景: 这是一个招聘求职项目遇到的一个问题.个人A向公司B的职位投递简历后,公司B会收到个人A的简历;但是A投递后把简历删除,公司收到的简历信箱还有这个简历,但却不能看了. 原 ...
错误 6 未能找到类型或命名空间名称“BLL”(是否缺少 using 指令或程序集引用?)
出现这个错误,要确保先引用BLL.dll, 如果引用之后还没有解决这个问题的话,确认一下程序集FrameWork版本与项目FrameWork版本一致.右击程序集属性可以更改.
HashMap和Hashtable存放null
Hashmap是可以放key为null的,Hashtable不能放key为null.hashtable放key为null会报空指针异常 1. hashmap put方法源码 public V put( ...
scss-声明变量与引用
一.变量的声明使用$符号可以标识一个变量 $bg-color: #FFFFFF; 二.变量的引用: 变量的引用有一个原则,那就是标准css属性值存在的地方,变量就可以存在. 当编译成css文件的时候 ...
1094 FBI树
1094 FBI树 2004年NOIP全国联赛普及组时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题目描述 Description 我们可以把由“ ...
JS基础学习——对象
JS基础学习--对象什么是对象对象object是JS的一种基本数据类型,除此之外还包括的基本数据类型有string.number.boolean.null.undefined.与其他数据类型不同的 ...
css 简单梯形
通过css2D变形我们可以轻松得到平行四边形,那么通过此技巧可以得到梯形吗? no! 不过我们可以通过3D旋转得到类似这样的效果: transform:perspective(0.5em) rota ...

WebSocket消息推送(实现进行聊天)和WebSocket简介