2024年基于（webSocket）搭建一个双人匹配聊天的在线网站，面试的知识

于 2024-05-14 04:41:47 发布
阅读量605 收藏 17
点赞数 20
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84435700/article/details/138831618
版权

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

css源码pdf

JavaScript知识点

gitee地址

==========================================================================

（前端）在线聊天-Vue。Gitee地址

（后端）在线聊天gitee地址

Fork->clone->打包->部署 私人聊天室不是梦😄😄

技术栈

======================================================================

服务：springboot,websocket长连接服务

前端：vue

通过websocket进行通信

maven依赖

引入springboot额外添加一个websocket相关依赖

org.springframework.boot

spring-boot-starter-websocket

webSocket服务器搭建

=================================================================================

  • 引入websocket服务后。我们需要创建一个类，并添加注解指定服务对外开放姐服务地址；

在这里插入图片描述

其中地址内有{}包裹是可以通过地址来接受的参数，上图可以接受用户名及性别。

webSocket生命周期对应的函数回调

服务端：

  1. 有客户端连接时：onOpen，在函数上添加该注解，当客户端连接时则会立即执行该函数。发生对应其他状态时也会执行特定函数

连接的回调函数可以接受当前连接的会话， 可以通过session发送消息，客户端连接有不同的会话，通过会话session可以发送消息，断开连接等操作

  1. 收到客户端发送的消息时：onMessage

可以接受收到的字符消息

  1. 出现异常情况时：onError

  2. 连接断开时：onClose

搭建使用：

在这里插入图片描述

启动springboot项目，就启动了webSocket服务。

客户端：

客户端使用webSocket连接服务器时，使用js的WebSocket对象创建连接

前端wensocket连接websocket服务代码

this.ws = new WebSocket(ws://localhost:3000/chat/${this.from.fromName}/${this.from.fromSex})

ws: w:web s:Socket 使用webSocket协议进行连接。

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-qluFsORT-1715632883220)]

2401_84435700
关注
  • 20
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一对一网页聊天 jsp+js+ajax+servlet+tomcat+mysql
YaYhui的博客
04-17 4087
初学javaweb，很想做一个网页版的一对一聊天系统，但是在网上查了一下发现并没有相应的资源，网页聊天室倒是有很多，一个原因是B/S与C/S相比不适合做实时通讯，另外可能是一对一聊天做起来比较难（我一开始认为的）。做的时候确实遇到了难题，两人交互不知道怎样进行，不知道怎样设计数据库等，后来参照聊天室，得到了一些想法，就尝试去做，调试很久之后终于可以运行了！下面具体介绍一对一聊天交互的实现。 聊天页
基于（webSocket）搭建一个双人匹配聊天的在线网站，2024前端大厂面试真题
2301_77118221的博客
03-21 518
我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）
“编程式 WebSocket” 实现简易 online QQ在线聊天项目
CYK_byte的博客
04-17 1582
实现一个 online QQ在线聊天项目，当用户登录上自己的账号后，将会显示在线，并可以向自己的好友进行在线聊天，退出登录后，将会把当前用户下线的消息推送给该用户的所有好友，并标识“下线”。
21点游戏双人对战（javaweb形式）
演绎哥的人生的博客
01-28 6688
本项目实现了一个双人在线对战的web21点游戏，进入页面后需要创建房间或者加入房间，等待房间存在两个人准备即可，等待双方准备完毕即可开始游戏，游戏采用轮庄模式，并实时显示服务器在线人数。 本项目基于springwebsocket，首先要让所以玩家建立一个链接，即对战平台，建立链接与聊天室的方式一样，才能实时信息交互！只有建立的动态链接才能进行下一步！ 接下来就是房间系统！！！ 先定义通过se
WebSocket协议理解并实现在线聊天
m0_52889702的博客
12-12 3967
一文搞懂WebSocket并利用此协议写一个在线聊天室 WebSocket是在HTML5开始提供的一种能在单个TCP连接上进行全双工通讯的网络通信协议HTTP协议：HTTP协议是一种无状态（请求完成后，连接彻底断开，节省资源）、无连接(客户端端向服务端请求数据，获取数据后即断开连接)、单向（连接建立只能由客户端发起）的应用层通信协议，采用请求/响应模型。特性：客户端有事向服务器询问，服务器告诉它，告诉完毕后客户端没有问题就消失的无影无踪
.NET Core 基于Websocket的在线聊天室实现
10-15
主要介绍了.NET Core 基于Websocket的在线聊天室实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于WebSocket+Vue网络聊天室在线聊天系统设计
10-23
## 开发软件：WebStorm Nodejs + WebSocket + Vue 网络聊天室 一个简单的聊天室demo，实现的功能有: 私聊 群聊 消息已读和未读 未读消息显示和提醒 聊天文字颜色区别 创建房间 用户下线提示
php基于websocket搭建简易聊天室实践
12-19
本文实例讲述了php基于websocket搭建简易聊天室实践。分享给大家供大家参考。具体如下： 1、前言 公司游戏里面有个简单的聊天室，了解了之后才知道是node+websocket做的，想想php也来做个简单的聊天室。于是搜集各种...
基于WebSocket的在线聊天室设计源码
最新发布
04-16
本源码项目是基于WebSocket的在线聊天室设计，包含133个文件，主要使用Java、CSS、JavaScript和HTML编程语言。该项目通过WebSocket实现了实时的在线聊天功能，用户可以实时发送和接收消息。项目重点在于后端接口的...
基于Websocket的在线聊天源码
05-29
在这个基于Websocket的在线聊天源码中，开发者提供了一个基础的聊天应用框架，尽管前端界面可能在某些分辨率下表现不佳，但主要的逻辑和功能都在后端代码中实现。 1. **WebSocket协议**：WebSocket协议是HTML5的一...
js实现网页在线聊天室
06-06
Javascript实现网页在线聊天,类似于聊天室的简单实现.
基于WebSocket的在线文字聊天室
qq_63806300的博客
08-14 1080
与Ajax不同，WebSocket可以使服务端主动向客户发送响应，本案例就是基于WebSocket的一个在线聊天室，不过功能比较简单，只能满足文字交流。演示如下。案例学习于b站up主，。这位up主讲的非常清楚，值得去学习。本文属于记录自我学习过程的文章。项目目录下app.js项目目录下打开终端下载成功后。项目目录下index.html去掉css。app.jsindex.html浏览框1浏览框2稍微美化页面，增强一下逻辑。在浏览器内打开三个窗口，既有3个人参与到聊天室中，现在可以聊天了。
(二十)ATP应用测试平台——websocket实现微服务版在线客服聊天室实战案例
厉害哥哥的博客
11-04 1841
在前面的博客内容中我们介绍了如何使用websocket实现一个网页版的在线客服聊天室，众所周知，由于websocket是一个长连接，要和服务端保持会话连接，所以其本身并不适用于微服务环境，在微服务环境中，有可能A、B俩个客户端连接到不同的服务A、B中，这样就没法保证A、B俩个客户端完成聊天的功能，因为会话不在同一台服务器上，A、B无法感知到对方发送的消息，为了解决websocket单机的这个痛点，我们引入消息中间键RocketMQ的广播机制，实现消息的转发，从而实现微服务版的websocke聊天室功能。
搭建自己的聊天室平台、公司内部聊天平台，Rocket.Chat搭建及使用
热门推荐
04-13 1万+
一，简介 rocket.chat是一个开源的社交软件，即可以直接在web页面使用，也可以下载APP(Android，IOS，Windows，Mac OS) 主要功能：群组聊天，直接通信，私聊群，桌面通知，媒体嵌入，链接预览，文件上传，语音/视频 聊天，截图等，还支持实时翻译，实现用户之间的自动实时消息转换。 也可以作为公司的内部聊天平台，所有数据都在自己的服务器上。 官方网址：https://rocket.chat/ 官方github地址：https://github.com/RocketChat/Rock
网页版即时聊天工具
虽码不是农博客
12-22 6594
客服类型的网页聊天工具，客户点击以后，自动分配一个已在线的客服给对接回答问题。用netty当作服务端。用简单的html语言搭建网页，消息记录存储在sessionStorage中，勉强实现了消息记录的功能效果如图后续：目前实现的功能，应该是可以满足小范围的使用。毕竟每个客户都会建立一条ws链接。没测试过具体能够抗住多少并发。
Fiora二次元Web在线聊天室源码搭建教程|详细
weixin_63660670的博客
05-23 1091
使用的系统是Linux Centos7.6注意: 512M内存vps可能还需要先加一点虚拟内存，不然构建过程会失败。开始安装命令行安装方法一、安装Nodejs二、安装Mongodb#将下面命令一起复制进SSH客户端运行gpgcheck=1enabled=1EOF注意: 如果导入公匙时出现gnupg, gnupg2 and gnupg1 do not seem to be installed错误，使用apt install -y gnupg2，然后重新导入即可。
html5在线聊天一对一,纯js网页在线聊天对话插件(原创)
weixin_36031047的博客
05-31 2249
插件描述：包含最近会话、好友分组、系统通知导航界面，支持发送接收消息功能，后续长期持续更新。更新时间：2020-04-0621:59:051、首部引入2、使用方式仅一行代码varcm=newChatModule({mock_mode:true});//mock_mode传false时不会加载mockjs，会真正发起对应url请求3、因模拟后端数据，演示用例额外引入axios和mockjs...
用html写一个websocket双人聊天
05-02
首先，需要了解 WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。在浏览器中，WebSocket 可以使用 JavaScript 进行编写。 下面是一个简单的 HTML 页面，用于创建 WebSocket 连接并实现双人聊天： ```html <!DOCTYPE html> <html> <head> <title>WebSocket 双人聊天</title> </head> <body> <h1>WebSocket 双人聊天</h1> <div id="message-container"></div> <form id="message-form"> <input type="text" id="message-input" placeholder="输入消息"> <button type="submit">发送</button> </form> <script> // 创建 WebSocket 连接 const socket = new WebSocket('ws://localhost:8080'); // 当连接成功时执行此函数 socket.addEventListener('open', event => { console.log('连接成功'); }); // 当收到消息时执行此函数 socket.addEventListener('message', event => { const messageContainer = document.getElementById('message-container'); const messageElement = document.createElement('div'); messageElement.innerText = event.data; messageContainer.appendChild(messageElement); }); // 当连接关闭时执行此函数 socket.addEventListener('close', event => { console.log('连接关闭'); }); // 当表单提交时执行此函数 document.getElementById('message-form').addEventListener('submit', event => { event.preventDefault(); const messageInput = document.getElementById('message-input'); const message = messageInput.value; socket.send(message); messageInput.value = ''; }); </script> </body> </html> ``` 上面的代码中，我们创建了一个 WebSocket 连接，然后监听连接成功、收到消息和连接关闭等事件。在表单提交时，我们通过 `socket.send()` 方法将消息发送给另一个用户。 请注意，上面的代码只是一个简单的演示示例，实际上还需要进行更多的错误处理和安全措施。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值