Websocket原理

最新推荐文章于 2024-03-29 23:11:47 发布

搏·梦

最新推荐文章于 2024-03-29 23:11:47 发布

阅读量2.4k

点赞数 13

文章标签： websocket java tomcat jsp

本文链接：https://blog.csdn.net/xueyijin/article/details/105177438

版权

文章目录

1.websocket简单介绍
2. 为什么要用websocket
3. websocket的自带演示例子
4. 简单websocket连接
5. 用webSocket实现一个简单的聊天室
6. 用webSocket实现贪吃蛇

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实现一个简单的聊天室

由于写博客需要一定时间，作者最近身体有点虚，之后再补上，请大家耐心等待。不好意思了，各位。

6. 用webSocket实现贪吃蛇

搏·梦

关注

13
点赞
踩
43

收藏

觉得还不错? 一键收藏
1
评论
Websocket原理

文章目录1.websocket简单介绍2. websocket的自带演示例子1.websocket简单介绍WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持...
复制链接

扫一扫