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. 最近准备把安卓和java的知识再回顾一遍,顺便会写博客上!千变万化还都是源于基础,打扎实基础

    最近准备把安卓和java的知识再回顾一遍,顺便会写博客上!千变万化还都是源于基础,打扎实基础,加油吧 距离去北京还有23天

  2. Android多语言与国际化

    internationalization (国际化)简称 i18n,因为在i和n之间还有18个字符,localization(本地化 ),简称L10n.一般用 语言_地区的形式表示一种语言,如 zh_ ...

  3. Caffe & Caffe2入门博客存档

    caffe2 教程入门(python版) https://www.jianshu.com/p/5c0fd1c9fef9?from=timeline caffe入门学习 https://blog.csd ...

  4. 每隔5s执行一次动作

    TimeSpan timespan; //第一次获取系统时间 DateTime d1 = DateTime.Now; while (true) { //第二次获取系统时间 DateTime d2 = ...

  5. 引爆你的Javascript代码进化 (转)

    转自 海玉的博客 方才在程序里看到一段JS代码,写法极为高明,私心想着若是其按照规范来写,定可培养对这门语言的理解,对JS编程能力提高必是极好的.说人话:丫代码写的太乱,看的窝火! 最近闲暇无事,准备 ...

  6. 关于input 中 hidden属性在后台作用的实例

    在双模的项目中,我遇到了一个问题,我公司的双模项目是基于ECShop的框架,在完成订单列表的页面时,我写了两个form表单来单独传输数据,第一个表单是用来做搜素的,第二个表单是用来显示表单信息的,在控 ...

  7. IOS微信浏览器点击事件不起作用问题

    问题: $(document).on("click",".btn",function(){alert("1")}); 在微信浏览器上点击不起 ...

  8. JQuery和html+css实现鼠标点击放烟花

    <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content= ...

  9. 【阿里云产品公测】性能测试服务PTS初体验

    作者:阿里云用户装甲兵 第一步,在九大产品免费公测 页面,点击性能测试服务PTS的申请公测按钮: 点击申请公测后,正确填写个人信息,免费申请性能测试服务PTS: 填写完成后,点击申请提交,耐心等待,一 ...

  10. SQL Server ->> SET ANSI_PADDING对于字符串插入的影响

    前面写了<SQL Server ->> 字符串对比>讲了SQL Server在做字符串对比和排序时的对尾随空格的处理方法. 再说说有一个和字符串尾随空格相关联的东西就是SET ...