16.WebSocket实现网页聊天室

已于 2023-09-23 11:31:47 修改
阅读量216 收藏
点赞数
分类专栏： skill 文章标签： websocket 网络协议 网络
于 2023-08-30 20:06:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LB_bei/article/details/132589629
版权

基于SpringBoot 2.6.11

1.WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，可以在html页面直接使用。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

过去，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

image-20220409085906297

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。

当获取WebSocket连接后，可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

WebSocket在传输的过程中不再使用http协议，而是Stomp协议

1.1 STOMP

STOMP即Simple (or Streaming) Text Orientated Messaging Protocol，简单(流)文本定向消息协议，它提供了一个可互操作的连接格式，允许STOMP客户端与任意STOMP消息代理（Broker）进行交互。STOMP协议由于设计简单，易于开发客户端，因此在多种语言和多种平台上得到广泛地应用。

STOMP协议的前身是TTMP协议（一个简单的基于文本的协议），专为消息中间件设计。

STOMP是一个非常简单和容易实现的协议，其设计灵感源自于HTTP的简单性。尽管STOMP协议在服务器端的实现可能有一定的难度，但客户端的实现却很容易。例如，可以使用Telnet登录到任何的STOMP代理，并与STOMP代理进行交互。

1.2 WebSocket 事件

以下是 WebSocket 对象的相关事件。

事件事件处理程序描述
openSocket.onopen连接建立时触发
messageSocket.onmessage客户端接收服务端数据时触发
errorSocket.onerror通信发生错误时触发
closeSocket.onclose连接关闭时触发

1.3 WebSocket 方法

以下是 WebSocket 对象的相关方法。

方法描述
Socket.send()使用连接发送数据
Socket.close()关闭连接

2.用WebSocket实现网页端聊天室

        导入依赖
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
        创建配置类
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @author: Elivs.Xiang
 * @Email: 406862257@qq.com
 * @create 2022-12-06 15:09
 * @verson IDEA 2020.3
 */

@Configuration
public class WebsocketConfig {
    @Bean    //在容器中创建bean对象，在WebSocketUtil中需要用到的RemoteEndpoint对象
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}
        创建工具类
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

import javax.websocket.Session;
import javax.websocket.RemoteEndpoint;
public class WebSocketUtil {
	//HashMap：不支持多线程，并发情况下线程不安全
	public static final Map<String, Session> MESSAGEMAP = new ConcurrentHashMap<>();
	
	//发送消息给客户端
	public static void sendMessage(Session session,String message) {
		if (session!=null) {
			final RemoteEndpoint.Basic basic = session.getBasicRemote();
			if (basic!=null) {
				try {
					basic.sendText(message);//发送消息回客户端
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
		}
	}
	
	//将消息给所有聊天室的人
	//循环发送
	public static void sendMessageToAll(String message) {
		MESSAGEMAP.forEach((sessionId,session)->sendMessage(session, message));
	}
}
        创建handler
import java.io.IOException;
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;

import com.example.web.util.WebSocketUtil;
import org.springframework.web.bind.annotation.RestController;

@RestController
@ServerEndpoint("/WebSocketHandler/{userName}")		//表示接受的是STOMP协议提交的数据
public class WebSocketHandler {
	
	//建立连接
	@OnOpen
	public void openSession(@PathParam("userName")String userName,Session session) {
		//消息
		String message = "欢迎:"+userName+"加入群聊";
		//加入聊天室
		WebSocketUtil.MESSAGEMAP.put(userName, session);
		//发送消息
		WebSocketUtil.sendMessageToAll(message);
	}
	
	@OnMessage
	public void onMessage(@PathParam("userName")String userName,String message) {
		message = userName+":"+message;
		WebSocketUtil.sendMessageToAll(message);
	}
	
	//离开聊天室
	@OnClose
	public void onClose(@PathParam("userName")String userName,Session session) {
		//将当前用户从map中移除 注销
		WebSocketUtil.MESSAGEMAP.remove(userName);
		//群发消息
		WebSocketUtil.sendMessageToAll("用户:"+userName+"离开聊天室");
		//关闭session
		try {
			session.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
	//连接异常
	@OnError
	public void onError(Session session,Throwable throwable) {
		try {
			session.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}
        主启动类开启websocket
@SpringBootApplication
@EnableWebSocket
public class WebApplication {
    public static void main(String[] args) {
        SpringApplication.run(WebApplication.class, args);
    }
}
        前端代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            let url = "ws://192.168.7.131:9988/WebSocketHandler/";
            let ws = null;
            //连接服务器
            $("#join").click(function(){
                let userName = $("#userName").val();
                let newUrl = url + userName;	//传递用户名
                console.info(newUrl);
                //创建对象，连接服务器
                ws = new WebSocket(newUrl); 	//html5中提供了

                //给open事件绑定方法
                ws.onopen = function(){
                    console.info("连接成功");
                }
                //接收到数据
                ws.onmessage = function(result){
                    var textarea = document.getElementById('textarea');
                    textarea.append(result.data+"\n");
                    //将文本域的滚动条滚动到最后
                    textarea.scrollTop = textarea.scrollHeight;
                }
                //关闭连接
                ws.onclose = function(){
                    $("#textarea").append("用户:"+userName+"离开聊天室"+"\n");
                    console.info("关闭连接");
                }
            });
            //发送消息
            $("#send").click(function(){
                //将输入框中的消息发送给服务器，并且显示到消息框中
                var messageInput = $("#message");
                var message = messageInput.val();
                if(ws!=null){
                    ws.send(message);	//发送消息
                    messageInput.val("");
                }
            });
            //断开连接
            $("#out").click(function(){
                if(ws!=null){
                    ws.close();
                }
            });
        })
    </script>
</head>
<body>
<div id="box">
    <p>萝卜聊天室</p>
    <textarea rows="10" cols="50" disabled="disabled" id="textarea"></textarea><br>
    <div class="infoBox">
        用户名:<input type="text" id="userName"><br><br>
        <button style="color: green;" id="join">加入聊天室</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button style="color: red;" id="out">离开聊天室</button>
    </div>
    <br><br>
    <div class="infoBox">
        消&nbsp;&nbsp;&nbsp;息:<input type="text" id="message"><br><br>
        <button id="send">发送消息</button>
    </div>
    <br>

</div>
</body>
</html>
        css
#box{
	width: 500px;
	background: pink;
	text-align: center;
}
.infoBox{
	text-align:left;
	position: relative;
	left: 62px;
}
#message{
	width: 322px;
}
#send{
	position:relative;
	left:50px;
	height:30px;
	width: 326px;
}
        启动项目报错
Caused by: java.lang.IllegalStateException: javax.websocket.server.ServerContainer not available

在测试类上的@SpringBootTest中加上

webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT

@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)
class WebApplicationTests {
    @Test
    void contextLoads() {
    }
}
整合Gateway

在application.yml中配置websocket路由

spring:
  application:
    name: gateway
  cloud:
    gateway:
      routes:
        - id: chat  #
          uri: "ws://127.0.0.1:8000"   # ws 协议    需要指定IP，通过微服务名字会报503
          predicates:
            - Path=/WebSocketHandler/**
LB_bei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何使用WebSocket实现网页聊天室？
m0_74931226的博客
12-05 3580
服务器推送你还在使用轮询吗？本文将带你领略WebSocket的魅力，轻松实现服务器推送功能。本文将以下面两方面让你理解WebSocket并应用到具体的开发中WebSocket 是一种网络通信协议。RFC6455 定义了它的通信标准。WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。这种通信模型有一个弊端：HTTP 协议无法实现服务器
WebSocket实现网页聊天室
http://kingim.cn/
04-20 7821
1、先看演示效果，如下： 2、websocket 技术背景 我们知道，传统的HTTP协议是无状态的，每次请求（request）都要由客户端（如浏览器）主动发起，服务端进行处理后返回response结果，而服务端很难主动向客户端发送数据；这种客户端是主动方，服务端是被动方的传统Web模式对于信息变化不频繁的Web应用来说造成的麻烦较小，而对于涉及实时信息的Web应用却带来了很大的不便，如带有
基于WebSocket实现网页聊天室
热门推荐
woaiwym的博客
06-12 3万+
背景在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 flex ajax bridge,可以在javascript中使用这两项功能. 可以预见,如果websocket一旦在浏览器中得到实现,将会替代上面两项技术,得到广泛的使用.面对这种状况，HTML5定...
基于WebSocket的网页版聊天室项目
eternal_yy
11-17 662
web聊天室项目 本次项目的目录结构： dao层： 对数据库的CURD操作； 对应本次项目的用户模块的注册与登陆； （注册就是对数据库进行insert操作，登陆就是对数据库进行查询操作） service层： 处理具体的业务； controller： （1）调用service获取数据返回给客户端； （2）从客户端获得数据调用业务处理； 前端首界面： <!DOCTY...
使用Java和WebSocket实现网页聊天室实例代码
09-02
本项目旨在使用Java和WebSocket实现一个网页聊天室，前端采用AmazeUI框架，提供跨屏自适应界面；编辑器使用UMEditor，支持富文本输入。后端使用Java技术栈，结合WebSocket协议处理通信。 【环境配置】 1. **服务器...
WebSocket网页在线聊天室
03-16
在“WebSocket网页在线聊天室”项目中，我们利用Java Web技术栈，通过WebSocket实现了浏览器端的在线聊天功能。这里涉及到的主要知识点包括： 1. **WebSocket协议**：WebSocket协议是HTML5的一部分，它通过HTTP/1.1...
基于websocket的网页聊天室（私聊+多对多）
11-19
本项目是一个基于WebSocket的网页聊天室，具备私聊和多对多聊天功能，适合初学者理解和实践网络通信的实时性。 在WebSocket技术中，服务器和客户端之间的通信始于一个HTTP升级请求，客户端通过发送一个"Upgrade...
利用html5的websocket实现websocket聊天室
09-28
WebSocket 的应用远不止聊天室，它可以用于实时股票报价、在线游戏、协作编辑等多种场景，因为它能够提供低延迟、高效的双向通信。然而，也需要注意 WebSocket 的跨域问题和安全性，例如实施适当的认证和授权机制来...
webChat使用websocket实现网页多人聊天
07-03
WebSocket是一种在客户端和服务器之间建立持久连接的协议，它为实时通信提供了低延迟、高效率的解决方案，尤其适合于需要双向通信的在线应用，如网页聊天室。在本项目"webChat"中，我们将探讨如何利用WebSocket技术...
网络协议-SOTP 协议格式
ziyunLLL的博客
07-19 262
SOTP（Secure Overlay Transport Protocol）是一种安全的覆盖层传输协议，旨在提供增强的安全性和功能。2.密钥管理：密钥的管理和交换是协议安全的重要部分，通常使用公钥基础设施（PKI）或密钥交换协议（如 Diffie-Hellman）。1.安全性：确保加密算法和认证算法的安全性。常用的加密算法包括 AES，常用的认证算法包括 HMAC-SHA256。3.性能：加密和认证会增加计算开销，需要在安全性和性能之间找到平衡。SOTP 协议格式的一般结构。
go 实现websocket以及详细设计流程过程，确保通俗易懂
每天进步一点
07-17 888
数据只能单向传送为单工；数据能双向传送但不能同时双向传送称为半双工；数据能够同时双向传送则称为全双工。上面是简单的接受了websocket情况以及和其他协议的区别及联系，在做之前，还是要了解下这块，对后期实战有帮助。
计算机网络序章
nwbfygsjdr的博客
07-19 603
一些互相连接的、自治的计算机的集合。
HOW - 保证 WebSocket 持续正常连接
最新发布
weixin_58540586的博客
07-19 714
保证 WebSocket 持续正常连接。
计算机网络入门
qq_64037280的博客
07-15 734
计算机网络是将一个分散的、具有独立功能的计算机系统通过通信设备与线路等连接起来，由功能完善的软件实现资源共享和信息传递的系统。
FastAPI 学习之路（五十）WebSockets（六）聊天室完善
mr~li的博客
07-16 275
首先，我们的登录用户还是用了之前分享中的数据库相关用户，直接调用，之前也是从数据库获取用户，校验密码，密码成功后才让登录。我们现在实现的是针对所有人和广播。那么我们看下，我们的管理聊天链接的已经完善。其次，我们建立了链接管理类，但是我们现在的链接都是没有针对发消息做管理的，我们去扩展下我们之前的发消息的类。我们这次只是对于之前的功能做下优化，顺便利用下之前的操作数据的接口，使用下数据库的练习。我们从简单的聊天室入手，慢慢改造我们的代码，慢慢完善。首先，第一个用户已经登录进来了，接下来登录第用户B。
Netty UDP
mqiqe的专栏
07-16 769
UDP是一种无连接的协议，它并不在通信双方之间建立连接，而是直接将数据包从发送端发送到接收端。UDP不保证数据包的可靠传输，也不保证数据包的顺序，因此其传输速度通常比TCP快，且系统开销较小。然而，这也意味着UDP在某些情况下可能会丢失数据包或数据包到达的顺序错乱。
计算机网络——网络层（路由选择协议、路由器工作原理、IP多播、虚拟专用网和网络地址转换）
2303_80204192的博客
07-16 1041
应当指出，路由选择是个非常复杂的问题，因为它是网络中的所有节点共同协调工作的结果。其次，路由选择的环境往往是不断变化的，而这种变化有时无法事先知道。 倘若从路由算法能否随网络的通信量或拓扑自适应地进行调整变化来划分，则只有两大类，即静态路由选择策略与动态路由选择策略。静态路由选择也叫作非自适应路由选择， 路由信息协议(Routing Information Protocol，RIP）是内部网关协议中最先得到广泛使用的协议之一。 RIP要求自治系统AS内的每一个路由
socket 收发TCP/UDP
Word_And_Me_的博客
07-19 372
个人测试记录，有问题还请指出，谢谢参考：C++开发基础之网络编程WinSock库使用详解TCP/UDP Socket开发_c++ udp使用什么库-CSDN博客代码中Logger测试见文章： c++中spdlog的使用/python中logger的使用-CSDN博客收发TCP信号 运行结果如下： 收发UDP信号 3、SocketManager.cpp
基于C语言的websocket在web网页聊天室中实现qq聊天界面的成员在线列表的服务端和html网页的示例代码
07-14
以下是一个示例代码，展示了如何使用C语言的WebSocket在网页聊天室中实现QQ聊天界面的成员在线列表的服务端和HTML网页。 服务端代码（使用libwebsockets库）： ```c #include <stdio.h> #include <stdlib.h> #include <string.h> #include <libwebsockets.h> #define MAX_CLIENTS 10 struct per_session_data { int client_id; }; static int callback_chat(struct lws *wsi, enum lws_callback_reasons reason, void *user, void *in, size_t len) { struct per_session_data *pss = (struct per_session_data *)user; switch (reason) { case LWS_CALLBACK_ESTABLISHED: // 连接建立时，将client_id存储到pss中 pss->client_id = lws_get_socket_fd(wsi); break; case LWS_CALLBACK_RECEIVE: // 接收到消息时，可以进行相应处理 break; case LWS_CALLBACK_SERVER_WRITEABLE: // 服务端可写时，可以向客户端发送消息 break; case LWS_CALLBACK_CLOSED: // 连接关闭时，进行相应处理 break; default: break; } return 0; } static struct lws_protocols protocols[] = { { "chat", callback_chat, sizeof(struct per_session_data), 0 }, { NULL, NULL, 0, 0 } }; int main() { struct lws_context_creation_info info; struct lws_context *context; const char *interface = NULL; int port = 8080; int opts = 0; memset(&info, 0, sizeof(info)); info.port = port; info.iface = interface; info.protocols = protocols; context = lws_create_context(&info); if (!context) { fprintf(stderr, "Failed to create libwebsocket context\n"); return -1; } printf("Server started on port %d...\n", port); while (1) { lws_service(context, 50); } lws_context_destroy(context); return 0; } ``` HTML网页代码： ```html <!DOCTYPE html> <html> <head> <title>WebSocket Chat</title> </head> <body> <div id="members-list"> <!-- 在线成员列表将动态添加到这里 --> </div> <script> var socket = new WebSocket("ws://localhost:8080", "chat"); socket.onopen = function(event) { console.log("Connected to server"); }; socket.onmessage = function(event) { console.log("Received message: " + event.data); }; socket.onclose = function(event) { console.log("Connection closed"); }; </script> </body> </html> ``` 这只是一个简单的示例，你可以根据需求进行进一步的开发和优化。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值