文章目录
1.websocket简单介绍
- WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
- WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
- 在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
重点:1.全双工,客户端与服务端可以同时相互通信,就如同打电话一样,两边可以同时说话。
2.允许服务端主动向客户端发数据,在以往的通信中是客户端向服务端发送请求,服务端再回复给客户端,一切起源只能是客户端的request,服务端无法主动发送信息给客户端;在websocket中,则可以服务端主动给客户端发送信息。
3.持久性,当服务端跟客户端通信连接成功(即建立起一个管道),这个管道将会一直存在,随时可以传送数据,无需在request。
若没有说清楚,请再参考下面的文章,说的比较通俗易懂。
https://www.jianshu.com/p/d5c1f704fbc5
2. 为什么要用websocket
- 初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处?答案很简单,因为 HTTP 协议有一个缺陷:通信只能由客户端发起。
- 举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
3. websocket的自带演示例子
现在演示下websocket自带的example
- 先启动Tomcat。
在Tomcat文件下bin文件里面,找到startup.bat 双击点击启动。
- 启动成功后,在浏览器中输入http://localhost:8080/,进入下面的界面。
- 点击example并且选着WebSocket Examples
4. 解释下(例子是从简单到难):
Echo example :简单的连接发送信息。
Chat example :聊天系统室。
Multiplayer snake example :多人对抗贪吃蛇
Multiplayer drawboard example:多人画布(同步的)
- 例子的参考代码是自带的,在tomcat文件夹内
1.class包
E:\apache-tomcat 9\apache-tomcat-9.0.22\webapps\examples\WEB-INF\classes\websocket
2.xhtml
E:\apache-tomcat 9\apache-tomcat-9.0.22\webapps\examples\websocket
ExamplesConfig.java 是websocket连接的配置文件
4. 简单websocket连接
-
先创建一个web项目(我的项目名:Bwebsocket_1)
-
导入需要的jar包,如下:
tomcat-websocket.jar包是 tomcat服务器对于webSocket接口的实现。
websocket-api.jar包是定义webSocket应用程序开发接口。
(两个包,缺一不可)。这两个包在E:\apache-tomcat 9\apache-tomcat-9.0.22\lib中
-
建立启动类,是websocket连接的配置文件。
启动类会在启动项目的时候,自动启动的。它需要实现ServerApplicationConfig接口。(具体在代码上说)
package com.config;
import java.util.Set;
import javax.websocket.Endpoint;
import javax.websocket.server.ServerApplicationConfig;
import javax.websocket.server.ServerEndpointConfig;
public class Config implements ServerApplicationConfig{
/*
1.在ServerApplicationConfig接口中,需要实现两个方法,分别如下两个。
2.通常我们用的是第一个函数(自动扫描),是注解方式,启动时,会自动扫描src下是否有 @ServerEndpoint注解的类。
3.第二个函数是 用接口形式的,通常不用,想了解的人可以自行百度一下。
*/
@Override
public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> scans) {
// TODO 自动生成的方法存根
System.out.println("config....." + scans.size()); //用于第5步骤测试
return scans;
}
@Override
public Set<ServerEndpointConfig> getEndpointConfigs(Set<Class<? extends Endpoint>> arg0) {
// TODO 自动生成的方法存根
return null;
}
}
- 建立服务器。
先创建一个sockets包,并创建一个socket_1类。
在Socket_1.java中写下如下代码:
package com.sockets;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/Socket_1") //@ServerEndpoint()为注解,只有写了,启动类扫描时才会识别到,()里面可以随便写。
public class Socket_1 {
}
-
测试是否可以扫描到相应的类。
这里可以看到scans.size()=1,即为一个。
若我在sockets包中再创建一个socket_2类并且写上注解。
再次启动web项目,结果如下:
-
建立一个首页
输入以下内容并可以生成相应的页面
-
在index.jsp页面中写入以下代码(创建连接),
即点下connect按钮,则会与服务器创建连接(这里的服务器是你的Socket_1类)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var ws; /* 创建全局Websocket对象 */
/* target 为地址,即跟谁建立起管道,Bwebsocket_1是项目名 、Socket_1必须跟注解@ServerEndpoint("")中的值一样 */
var target = "ws://localhost:8080/Bwebsocket_1/Socket_1";
function subopen(){
//这段代码是检查你的浏览器是否支持websocket协议
if ('WebSocket' in window) {
ws = new WebSocket(target); //创建管道
alert("启动了");
} else if ('MozWebSocket' in window) {
ws = new MozWebSocket(target);
} else {
alert('WebSocket is not supported by this browser.');
return;
}
}
</script>
</head>
<body>
<button onclick="subopen()">connect</button>
<input id = "msg" /> <button>send</button>
<div id="content"></div>
</body>
</html>
- 在Socket_1类中,写入以下代码。
先科普个知识点
package com.sockets;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/Socket_1") //@ServerEndpoint()为注解,只有写了,启动类扫描时才会识别到,()里面可以随便写。
public class Socket_1 {
//连接时则会执行@OnOpen中的代码,这里只是让他输出,连接session个数。
@OnOpen
public void open(Session session) {
System.out.println("Session......" + session.getId());
}
}
- 启动web项目
点击connect按钮
且在控制台会输出Socket_1中的代码,也可以看出连接成功,管道建立成功,此时我在开启一个网页并点击connect按钮。
则会又建立一个管道。一个session代表一个通信会话,10个session之间不冲突,即变量之间不影响。
我们从网页上来看,
- 接下来我们来尝试发消息。先是客户端发信息,服务端收信息。
在服务端中我们加入下面代码(服务端要收消息):
在index.jsp页面中写入(客户端要发消息,即重要代码是:ws.send(a);a变量为需要发送的话)
点击运行,一定要先连接,后再发送消息。
11. 现在是服务端收到消息,向客户端发送消息
再客户端中写入(收消息的函数):
在服务端中写入发送消息相关代码:
红圈则是 服务端给客户端发送信息的代码。
运行,一定要点击connect 先连接 先连接 先连接 再发送消息。
若继续发信息,
5. 用webSocket实现一个简单的聊天室
由于写博客需要一定时间,作者最近身体有点虚,之后再补上,请大家耐心等待。不好意思了,各位。