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简介的更多相关文章

  1. 【WebSocket】WebSocket消息推送

    准备使用WebSocket实现Java与Vue或者安卓间的实时通信,实现私密聊天.群聊.查询下资料备用. WebSocket客户端 websocket允许通过JavaScript建立与远程服务器的连接 ...

  2. node.js Websocket消息推送---GoEasy

    Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送 速度快,代码简单易懂上手快 浏览器兼容性:GoEasy推送 支持websocket ...

  3. C(++) Websocket消息推送---GoEasy

    Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送 速度快,代码简单易懂上手快 浏览器兼容性:GoEasy推送 支持websocket ...

  4. SSE(Server-sent events)技术在web端消息推送和实时聊天中的使用

    最近在公司闲着没事研究了几天,终于搞定了SSE从理论到实际应用,中间还是有一些坑的. 1.SSE简介 SSE(Server-sent events)翻译过来为:服务器发送事件.是基于http协议,和W ...

  5. websocket消息推送实现

    一.服务层 package com.demo.websocket; import java.io.IOException; import java.util.Iterator; import java ...

  6. WebSocket消息推送

    WebSocket协议是基于TCP的一种新的网络协议,应用层,是TCP/IP协议的子集. 它实现了浏览器与服务器全双工(full-duplex)通信,客户端和服务器都可以向对方主动发送和接收数据.在J ...

  7. spring boot下WebSocket消息推送(转)

    原文地址:https://www.cnblogs.com/betterboyz/p/8669879.html WebSocket协议 WebSocket是一种在单个TCP连接上进行全双工通讯的协议.W ...

  8. spring+rabbitmq+stomp搭建websocket消息推送（非spring boot方式）

    前言: 两年前做过spring+activemq+stomp的ws推送,那个做起来很简单,但现在公司用的mq中间件是rabbitmq,因此需要通过rabbitmq去做ws通信.仔细搜了搜百度/谷歌,网 ...

  9. spring boot下WebSocket消息推送

    WebSocket协议 WebSocket是一种在单个TCP连接上进行全双工通讯的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范.WebSo ...

随机推荐

  1. connection reset by peer, socket write error问题排查

    2018-03-15更新:弄明白connection reset产生的原因,见重新分析connection reset by peer, socket write error错误原因 在开发文件上传功 ...

  2. Js简易代码生成工具

    代码 javascript:(function(){ document.body.innerHTML = '<textarea id="txtTemplate" style= ...

  3. ActivityGroup和TabActiviy的差异性？

    TabActivity功能比较专一,就是做主界面Activity切换用的,所以定制性方面也就限制了许多,而且修改麻烦,不便于维护.ActivityGroup也是用来管理多个Activity的,但是功能 ...

  4. 创建bat文件打开指定目录的cmd窗口

    默认的 cmd打开的是用户目录,如下: 有时,这样非常不方便,还得不断的cd到我们要使用的目录,例如,我们想改成默认制定的目录是D盘的cmd窗口 代码如下:    cmd /k cd/d " ...

  5. [转]Wrapping multiple calls to SaveChanges() in a single transaction

    本文转自:http://www.binaryintellect.net/articles/165bb877-27ee-4efa-9fa3-40cd0cf69e49.aspx When you make ...

  6. FreeSwitch无法启动，提示进程pid锁定的解决方法

    来源:https://stackoverflow.com/questions/12817232/how-do-i-call-a-local-softphone-on-freeswitch error ...

  7. c#.net常见字符串处理方法

    1.字符串比较 字符串.ComparTo(目标字符串) "a".ComparTo("b"); 2.查找子串 字符串.IndexOf(子串,查找其实位置) ; 字 ...

  8. tomcat常用技巧

    1. 修改Tomcat的名称 适用场景: 在测试服务器资源有限或是在本机服务器部署多套应用系统时,由于要启动多个TOMCAT服务,且TOMCAT服务没有用名称去区分,会造成维护使用上存在一定晨读的不方 ...

  9. CentOS-7 本地yum源挂载

    在Linux无法连接到互联网时,手动安装依赖是及其麻烦的一件事,需要花费大量的时间寻找rpm包.但在配置本地yum源后,绝决依赖问题就会变得非常简单. 一.准备 centos-7.ISO镜像文件: 二 ...

  10. Linux虚拟系统安装——Ubuntu18.04 & CentOS6.5

    Linux虚拟系统安装--Ubuntu18.04 & CentOS6.5 摘要:Linux简介.虚拟系统安装.系统备份与文件介绍 1. Linux简介 (1)1968年,MIT.Bell实验室 ...