websocket简单实现在线聊天
WebSocket简介与消息推送
B/S架构的系统多使用HTTP协议，HTTP协议的特点：
1 无状态协议
2 用于通过 Internet 发送请求消息和响应消息
3 使用端口接收和发送消息，默认为80端口
底层通信还是使用Socket完成。
HTTP协议决定了服务器与客户端之间的连接方式，无法直接实现消息推送（F5已坏）,一些变相的解决办法：
双向通信与消息推送
轮询：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。 优点：后端程序编写比较容易。 缺点：请求中有大半是无用，浪费带宽和服务器资源。 实例：适于小型应用。
长轮询：客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。 优点：在无消息的情况下不会频繁的请求，耗费资小。 缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护。 Comet异步的ashx，实例：WebQQ、Hi网页版、Facebook IM。
长连接：在页面里嵌入一个隐蔵iframe，将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求，服务器端就能源源不断地往客户端输入数据。 优点：消息即时到达，不发无用请求；管理起来也相对便。 缺点：服务器维护一个长连接会增加开销。 实例：Gmail聊天
Flash Socket：在页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信，JavaScript在收到服务器端传送的信息后控制页面的显示。 优点：实现真正的即时通信，而不是伪即时。 缺点：客户端必须安装Flash插件；非HTTP协议，无法自动穿越防火墙。 实例：网络互动游戏。
Websocket:
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。
特点:
事件驱动
异步
使用ws或者wss协议的客户端socket
能够实现真正意义上的推送功能
缺点：
少部分浏览器不支持，浏览器支持的程度与方式有区别。
JavaEE 7中出了JSR-356:Java API for WebSocket规范。不少Web容器，如Tomcat,Nginx,Jetty等都支持WebSocket。
一、下面demo使用jetty实现：
项目结构：
java后台代码：
package edu.nf.ws.server; import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Set; /**
* @author wangl
* @date 2018-12-05
* websocket服务端
*/
@ServerEndpoint("/chat/server/{userName}")
public class ChatServer { /**
* 当有客户端连接到服务端的时候就会调用这个方法
* session代表客户端和服务端的一个连接会话对象
* ，由容器负责创建和维护
*/
@OnOpen
public void onOpen(Session session, @PathParam("userName") String userName){
System.out.println("有客户端连接..."+userName);
//将用户名保存到当前用户会话的属性中（有点类似作用域的概念）
session.getUserProperties().put("user", userName);
} /**
* 客户端和服务器之间通信的方法，
* 服务端每当接收到客户端的消息就会调用这个方法
* ,注意：必须指定一个String类型的参数，表示接收到客户端的文本消息
*/
@OnMessage
public void onMessage(String message, Session session) throws IOException{
System.out.println("接收消息..." + message);
//将消息发送给所有人
sendAllUser(message, session);
} /**
* 当客户端关闭或者断开连接时，服务端会调用此方法
* @param session
*/
@OnClose
public void opnClose(Session session) throws IOException{
System.out.println("客户端失去连接...");
//关闭会话
session.close();
} private void sendAllUser(String message, Session session) throws IOException{
//获取所有人的会话对象
Set<Session> users = session.getOpenSessions();
//获取发送人
String sendUser = session.getUserProperties().get("user").toString();
//发送给所有人
for (Session user : users) {
user.getBasicRemote().sendText(sendUser + " : " + message);
}
}
}
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="loginDiv">
用户名:<input type="text" id="userName" name="userName"/>
<input type="button" id="login" value="login"/>
</div> <div id="container" style="display: none">
<div id="content"></div>
<input type="text" name="msg" id="msg"/>
<input type="button" id="send" value="send"/>
</div> <script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
var ws;
//登陆
$('#login').on('click',function(){
var userName = $('#userName').val();
//创建websocket对象并连接服务端
ws = new WebSocket('ws://localhost:8080/chat/server/' + userName); //客户端打开连接时会回调此方法
/*ws.onopen = function(){
//...
}*/ //客户端关闭或断开连接时执行此方法
/*ws.onclose = function(){
//...
}*/ //接收服务端发送的消息
ws.onmessage = function(message){
$('#content').append(message.data + "<br>");
}
$('#loginDiv').css('display','none');
$('#container').css('display','block');
});
//发送消息
$('#send').on('click',function(){
var msg = $('#msg').val();
//发送消息
ws.send(msg);
});
})
</script>
</body>
</html>
二、spring+jetty实现
项目结构：
pom 配置：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion> <groupId>edu.nf</groupId>
<artifactId>spring-ws</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging> <properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<java.version>1.8</java.version>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion>
<!-- spring版本 -->
<spring.version>5.1.1.RELEASE</spring.version>
<servlet.version>4.0.1</servlet.version>
<jackson.version>2.9.7</jackson.version>
</properties> <!-- 添加依赖 -->
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>${servlet.version}</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-websocket</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>${jackson.version}</version>
</dependency>
</dependencies> <!-- war插件 -->
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.2</version>
<configuration>
<warSourceDirectory>web</warSourceDirectory>
<!-- 指定web.xml路径 -->
<webXml>web\WEB-INF\web.xml</webXml>
</configuration>
</plugin>
</plugins>
</build> </project>
web.xml配置：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0"> <servlet>
<servlet-name>dispatcher</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:dispatcher-servlet.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping> </web-app>
ServerEndpointHandler（服务端）
package edu.nf.demo.websocket; import edu.nf.demo.entity.Users;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler; import java.util.Map;
import java.util.concurrent.ConcurrentHashMap; /**
* @author wangl
* @date 2018-12-06
* websocket服务端
*/
public class ServerEndpointHandler extends TextWebSocketHandler { /**
* 维护一个用户列表(key存放用户名，value存放每一个用户的WebSocketSession)
*/
private static Map<String, WebSocketSession> users = new ConcurrentHashMap<>(); /**
* 客户端建立连接之后执行此方法(onOpen)
* @param session 每当客户端连接后，容器会为其创建一个Session对象，
* 这个对象在Spring中就是WebSocketSession
* @throws Exception
*/
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
System.out.println("客户端建立了连接...");
//获取用户名,getAttributes方法得到的是一个Map，
//这个map里面存放了握手拦截器将HttpSession作用域拷贝过去的数据
Users user = (Users)session.getAttributes().get("user");
//将用户的session保存到用户列表中
users.put(user.getUserName(), session);
} /**
* 每当客户端发送消息时执行此方法（onmessage）
* @param session
* @param message TextMessage对象表示接收客户端的文本消息对象,
* 它的getPayload方法将获取具体消息内容
* @throws Exception
*/
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
System.out.println("接收客户端消息..." + message.getPayload());
//获取用户名
Users sendUser = (Users)session.getAttributes().get("user");
//群发消息
for(String userName : users.keySet()){
//重新构建一个TextMessage对象
TextMessage newMessage = new TextMessage(sendUser.getUserName() + " : " + message.getPayload());
//发送所有人
users.get(userName).sendMessage(newMessage);
}
} /**
* 哭护短关闭或断开连接时执行此方法（onclose）
* @param session
* @param status
* @throws Exception
*/
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
System.out.println("客户端断开连接...");
session.close();
}
}
UserController（请求控制类）
package edu.nf.demo.controller; import edu.nf.demo.controller.vo.ResponseVO;
import edu.nf.demo.entity.Users;
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpSession; /**
* @author wangl
* @date 2018-12-06
*/
@RestController
public class UserController { @PostMapping("/userLogin")
public ResponseVO login(Users user, HttpSession session){
//执行用户验证
//代码省略.......
//验证成功后将用户放入会话作用域
session.setAttribute("user", user);
ResponseVO vo = new ResponseVO();
vo.setCode(HttpStatus.OK.value());
vo.setData("index.html");
return vo;
}
}
index.html(登录成功的聊天网页)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="content"></div>
<input type="text" id="msg" name="msg"/>
<input type="button" value="send"/>
<script>
$(function () {
var ws = new WebSocket('ws://localhost:8080/websocket');
ws.onmessage = function (event) {
$('#content').append(event.data + '<br>');
}
$(':button').on('click',function () {
var msg = $('#msg').val();
ws.send(msg);
}); })
</script>
</body>
</html>
运行结果：
原理参照博客：https://www.cnblogs.com/best/p/5695570.html
websocket简单实现在线聊天的更多相关文章
- 基于Server-Sent Event的简单聊天室 Web 2.0时代，即时通信已经成为必不可少的网站功能，那实现Web即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。
基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...
- 基于PHP实现一个简单的在线聊天功能（轮询ajax ）
基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...
- 使用WebSocket实现简单的在线聊天室
前言:我自已在网上找好了好多 WebSocket 制作 在线聊天室的案列,发现大佬们写得太高深了 我这种新手看不懂,所以就自已尝试写了一个在线简易聊天室 (我只用了js 可以用jq ) 话不多说,直接 ...
- Spring Websocket实现简易在线聊天功能
针对Spring Websocket的实现,我参照了其他博主的文章https://www.cnblogs.com/leechenxiang/p/5306372.html 下面直接给出实现: 一.引入相 ...
- WebSocket实现简单的在线聊天
SuperWebSocket在WebService中的应用 最开始使用是寄托在IIS中,发布之后测试时半个小时就会断开,所以改为WindowsService 1. 新建Windows服务项目[Test ...
- springboot+websocket实现简单的在线聊天功能
效果如下: java实现逻辑: 1.引入maven依赖 <dependency> <groupId>org.springframework.boot</groupId&g ...
- Netty+WebSocket简单实现网页聊天
基于Netty+WebSocket的网页聊天简单实现 一.pom依赖 <dependency> <groupId>io.netty</groupId> ...
- application session 实现简单的在线聊天人数的统计
写了快一年的asp.net,application对象还真没怎么用过.看了看书,根据这两个对象的特性写了一个简单的聊天室程序.真的是非常的简陋 ASP.Net中有两个重要的对象,一个是applicat ...
- javaweb学习路之三--websocket多人在线聊天
在之前的项目基础上,加入了一个聊天室的功能,为了界面好看 引入了AmazeUI和umeditor最终效果图如下: 源码在 https://github.com/Zering/MyWeb 目前练习都在这 ...
随机推荐
- JAVA设计模式之简单粗暴学建造者模式
文章由浅入深,先用简单例子说明建造者,然后分析模式的优缺点,最后结合优秀开源框架Mybatis,说明该模式的用处. 1.先定义一个机器人模型 package com.jstao.model; publ ...
- Java面向接口编程，低耦合高内聚的设计哲学
接口体现的是一种规范和实现分离的设计哲学,充分利用接口可以极大的降低程序中各个模块之间的耦合,提高系统的可维护性以及可扩展性. 因此,很多的软件架构设计理念都倡导"面向接口编程"而 ...
- 45个值得收藏的 CSS 形状
摘要: CSS炫技. 原文:45个值得收藏的 CSS 形状 作者:前端小智 Fundebug经授权转载,版权归原作者所有. CSS能够生成各种形状.正方形和矩形很容易,因为它们是 web 的自然形状. ...
- appium+python搭建自动化测试框架_Tools安装（一）
作者的配置环境和版本: win10 + python3.6 + Appium v1.4.16 1.下载node https://nodejs.org/en/download/, 下载node.j ...
- Windows -- cmd命令: netstat 和 arp
1. netstat: 显示网络连接.路由表和网络接口信息,可以让用户得知有哪些网络连接正在运作. 命令格式及参数如下: 2. ARP: 可用于查询本机ARP缓存中IP地址和MAC地址的对应关系.添加 ...
- Identity Server 4 - Hybrid Flow - 使用ABAC保护MVC客户端和API资源
这个系列文章介绍的是Identity Server 4 实施 OpenID Connect 的 Hybrid Flow. 保护MVC客户端: https://www.cnblogs.com/cgzl/ ...
- Nosql与关系型数据库不同的使用场景
Nosql 1.适合存储非结构化数据存储,数据量且不可预期.如:评论,文章 2.排行榜数据获取,实时更新的数据.如:游戏榜排名,用户投票 3.限时抢购活动.如:淘宝抢购活动 4.反垃圾系统.如:敏感词 ...
- Locust性能测试学习总结
Locust学习总结分享 简介: Locust是一个用于可扩展的,分布式的,性能测试的,开源的,用Python编写框架/工具,它非常容易使用,也非常好学.它的主要思想就是模拟一群用户将访问你的网站.每 ...
- Navicat 导出sql问题
楼主最近碰到一个问题: 使用Navicat建立数据模型的时候使用导出sql功能导出的sql脚本放在sqlserver中执行失败,表创建成功了,但是我在Navicat中写的表注释和字段注释都没有成功, ...
- 二维剪板机下料问题（2-D Guillotine Cutting Stock Problem) 的混合整数规划精确求解——数学规划的计算智能特征
二维剪板机下料问题(2-D Guillotine Cutting Stock Problem) 的混合整数规划精确求解——数学规划的计算智能特征 二维剪板机下料(2D-GCSP) 的混合整数规划是最优 ...