百度t7 课程， websocket 实现简单聊天室

最新推荐文章于 2023-01-26 19:57:01 发布
最新推荐文章于 2023-01-26 19:57:01 发布
阅读量312 收藏
点赞数
分类专栏： 百度t7前端 文章标签： websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15009739/article/details/82682262
版权

最简单的聊天室，我写了一个小时，

写了10 分钟，调试50分钟

因为 我是小菜鸟，不过凡事都有过程

index.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>index</title>

		<!-- 基本小样式 -->

		<style>
			*{
				padding: 0;
				margin: 0;
			}

			ul{
				list-style: none;

			}

			 ul li p{
			 	background: #ccc;
			 	color:white;
			 }
			 ul li h1 {
			 	color:#bfa;
			 }

		</style>


		<!-- 1,  引入socket.io -->

	<script type="text/javascript" src="http://localhost:3000/socket.io/socket.io.js"></script>

		<script type="text/javascript">	
			'use strict'
			let nameVal ='';
			window.onload =function(){
				
				let oP = document.getElementById('p1');
				let  content = document.getElementById('content')
				let Obtn= document.getElementById('send')

				let oUl = document.getElementById('oUl')

				let name = document.getElementById('name')
				let psw = document.getElementById('psw')
				let login = document.getElementById('login')
			
				function addLi(msg,name){
					let nameVal2 = nameVal;
					if(name!=''){
						nameVal2 = name;
					}
					let oLi = document.createElement('li')
					oLi.innerHTML= `<h1>${nameVal2}</h1>
				<p>${msg}</p>`

				oUl.append(oLi)

				}
				// 连接服务器端：// 后端保存socket 地址： 
			 	let sock=io.connect('ws://localhost:3000/');

			 	login.onclick = function(){
			 			 nameVal = name.value;
			 			let pswVal = psw.value
			 			sock.emit('login',nameVal)
			 	}

			 	Obtn.onclick = function(){
			 		let msg= content.value;
			 		if(msg==''){
			 			alert('消息不能为空')
			 			return;
			 		}
			 		 addLi(msg,nameVal)
			 		console.log(nameVal)
			 		sock.emit('msg',msg,name.value)
			 	}

			 	sock.on('msg',function(msg,nameVal){			 				
			 			addLi(msg,nameVal)
			 	})					
			}
			
		</script>
	</head>
	<body>
		
		<h1>欢迎来到主页！！</h1>
		<input type="text" id="name"></input><br>
		<input type="text" id="psw"></input><br>

		<input type="button" value="login" id='login' />

		<textarea  id="content" value="" rows="10" cols="50">			
		</textarea>	
		<button  id ="send"> 发送消息</button>
		<ul id="oUl">
			<li>
				<h1 >action</h1>
				<p>action is power!!</p>	

			</li>
		</ul>
		
	</body>
	</html>

2, 后端hello.js

let http = require('http')
let  fs = require('fs')
let io = require('socket.io')
let server = http.createServer(function(req,res){
	
	fs.readFile(`public/index.html`, (err, data)=>{
    if(err){
      res.writeHeader(404);
      res.write('not found');
    }else{
      res.write(data);
    }

    res.end();
  });
	
})

server.listen(3000)

let server2 = io.listen(server)
let sockets = [];

let currentName = '';

server2.on('connection',function(socket){
	console.log('socket link success!')

	sockets.push(socket)

	socket.on('login',function(username){
		
		currentName= username;
		console.log('login success')
		console.log('currentName',currentName)

	})

	socket.on('msg',function(msg,nameVal){
		// 消息拿到之后，就可以循环发送了！
		console.log(msg , nameVal)\
		// 信息到这里没问题！
			// 过滤的操作
			let otherSocket = sockets.filter(item=>item!=socket)	
			for(let i = 0;i<otherSocket.length;i++){

				otherSocket[i].emit('msg',msg,nameVal)

			}
	})

})

最后显示效果

 

总结，我没有进行页面优化，比如是自己写的一个样式

不是自己写的另外一个样式，这些无非就是className 切换

其实逻辑很简单

就是 后台接收消息，然后转发就行了！

一个for 循环 的事情！

 

用人话，就是后台， 来一个请求，我就把你存进数组中， 当你向发消息时，我就把

挨着牌的向数组中的sock 进行转发就行了！

这次练习，不在于你写多了，在于你要养成敲代码的感觉！

爱生活，爱编程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【WebSocket】java使用WebSocket搭建简单聊天室
嗟鸠食桑
11-05 1858
本次使用的WebSocket 来搭建简单的聊天室，主要就是熟悉WebSocket是什么，能做什么的简单入门介绍 网络摘抄 websocket是什么？ 答: 它是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 为什么需要websocket? 疑问? 我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？ 答: 因为 HTTP 协议有一个缺陷：通信只能由客户端发起 我们都知道轮询的效率低，非常浪费资源（因为必须不停连接...
WebSocket聊天室（Spring）
10-16
spring MVC框架中搭建WebSocket 功能，实现多用户同时登录聊天室，支持群发和指定用户聊天功能
通过QT_TCP和百度AI接口实现的支持语音输入的多人聊天室
qq_58344299的博客
08-10 1816
使用QTCP和百度ai接口实现的并发实时聊天室
小程序开发过程中遇到过的那些坑
Crystal_nan_的博客
01-27 1378
分享一下记忆中遇到的小程序开发过程中的问题 开发中会遇到的问题千奇百怪，这里也只是我有记录的部分问题，或者对你来说根本算不上是问题，但是这里我还是想记录一下，欢迎赐教哦 1、页面滑动后，切换底部tab时，影响其他页面位置 分析：这是因为小程序不同的tab页面其实是公用的一个页面，只是不同的组件之间的切换，所以页面滑动后切换组件时也会受影响。 解决思路：通过页面滚动事件，在切换时将滚动高度置为0 示例： onPageScroll:function(e){ // 获取滚动条当前位置 console.lo
WebSocket 入门：简易聊天室
fe_watermelon的博客
01-26 5220
大家好，我是前端西瓜哥，今天我们用 WebSocket 来实现一个简单的聊天室。WebSocket 是一个应用层协议，有点类似 HTTP。但和 HTTP 不一样的是，它支持真正的全双工，即不仅客户端可以主动发消息给服务端，服务端也可以主动发消息给客户端。尤其是后者，让我们不用再基于 HTTP 长轮询或短轮询的低效方式来实现服务端通知。相比 HTTP，WebSocket 的服务端推送更轻量，并能减少服务端的压力。
Vue3 -- 基于Websocket实现简易聊天室
热门推荐
zhangdm的博客
06-10 3万+
聊天室
2021-06-14 Socketio学习使用搭建一个聊天室
APPDREAMER的博客
06-18 1071
Websocket学习使用 Websocket简介 Websocket协议运作图示 握手形式举例 字段说明 客户端实现 1、创建Websocket对象 2、Websocket事件 3、Websocket对象的方法 （用于客户端给服务端发送消息）
全栈架构师课程56阶段对标百度T6-T7
qq_38481458的博客
10-19 977
前往下载 目录如下阶段1：初识ES6阶段2：ES6详解阶段3：软件的使用（2017.11.5）阶段4：Markdown，git（2017.11.6）阶段5：generator，模块化与babel（2017.11.8)阶段6：数据交互（2017.11.10）  阶段7：答疑+webSocket预习（2017.11.12阶段8：webSocket聊天室搭建+node.js基础及...
基于Java webSocket实现的聊天室【100012616】
06-05
用websocket之后可以让前端和和后端像C/S模式一样实时通信，不再需要每次单独发送请求。然推出了websocket，作为现在主流的Java肯定也有相应的支持，所以在JavaEE7之后也对websocket做出了规范，所以本次的代码理论...
基于Springboot+Websocket的简单聊天室
06-01
基于Springboot+Websocket的简单聊天室 基于Springboot+Websocket的简单聊天室 基于Springboot+Websocket的简单聊天室 基于Springboot+Websocket的简单聊天室 基于Springboot+Websocket的简单聊天室 基于Springboot+...
安卓android+WebSocket实现简易QQ聊天室
01-03
2.websocket后端实现细节戳此链接spring boot练习–利用websocket实现QQ聊天室 界面展示 说明 有两个界面，第一个是登陆界面，我借用了我之前实现的登陆界面，并做了一些微调。需要输入ID和名字，测试的时候输入的ID...
Springboot+websocket 实现多人聊天室/单人聊天
10-11
这是一个简单使用websocket实现多人聊天室，单人聊天室的demo，里面使用的是最原始的websocket的方法，附有客户端界面可以直接跑起来发送消息看效果。 该项目对应刚刚接触websocket技术是比较有用的。 2019-10-11的...
springboot集成websocket实现一个简易聊天室
最新发布
03-28
springboot集成websocket实现一个简易聊天室，源码，开源
某音直播协议实现技术探讨
南天的专栏
06-09 9528
第一步：XG算法实现 此算法的实现稍微复杂，不在此篇做讲解，有了xg算法才能进入直播间、进行互动等。 第二步：查找进入API 通过抓包可以看到，进入某个直播的API如下 https://webcast3-normal-c-hl.amemv.com/webcast/room/enter/ URL中是一些基本的设备参数信息，抓包即可看到。 上代码 import requests sid_guard = 'xxx' room_id = '6836.........
WebSocket实现简单聊天室（java web）
homewin19的博客
03-17 5472
WebSocket实现简单聊天室 WebSocket简介：WebSocket其实是属于H5规范的一部分，它允许通过JavaScript建立和服务器的连接,从而实现服务器将数据推送给服务器。和传统TCP协议相比，WebSocket的好处在于实现了全双工通信（不需要客户端发出请求，服务器就可以直接向服务端发送数据），现在大部分的浏览器（FireFox,Chrome,Safari,...
golang基于websocket实现的简易聊天室程序
01-01
本文实例讲述了golang基于websocket实现的简易聊天室。分享给大家供大家参考，具体如下： 先说点无关的,最近忙于工作没有更新博客,今天休息顺便把golang websocket研究了一下,挺好玩的,写了一个聊天室,分享给大家. ...
利用html5的websocket实现websocket聊天室
09-28
WebSocket 的应用远不止聊天室，它可以用于实时股票报价、在线游戏、协作编辑等多种场景，因为它能够提供低延迟、高效的双向通信。然而，也需要注意 WebSocket 的跨域问题和安全性，例如实施适当的认证和授权机制来...
Java WebSocket实现简易聊天室
06-03
Java WebSocket是一种用于实现双向通信的网络协议，可以帮助我们实现简易聊天室。下面是一个基于Java WebSocket实现的简易聊天室的示例代码： 首先，我们需要定义一个WebSocket处理程序： ```java @ServerEndpoint("/chat") public class ChatEndpoint { private static Set<Session> sessions = Collections.synchronizedSet(new HashSet<Session>()); @OnOpen public void onOpen(Session session) { sessions.add(session); } @OnMessage public void onMessage(String message, Session session) throws IOException { for (Session s : sessions) { // 过滤自己 if (!s.equals(session)) { s.getBasicRemote().sendText(message); } } } @OnClose public void onClose(Session session) { sessions.remove(session); } } ``` 在这个处理程序中，我们使用`@ServerEndpoint("/chat")`注解指定了WebSocket的端点，即`/chat`。在`onOpen`方法中，我们将新的会话添加到会话集合中。在`onMessage`方法中，我们将接收到的消息广播给所有其他会话。在`onClose`方法中，我们将关闭的会话从会话集合中移除。 接下来，我们需要在`web.xml`文件中配置WebSocket： ```xml <web-app> <display-name>WebSocket Chat</display-name> <servlet> <servlet-name>chat</servlet-name> <servlet-class>org.glassfish.tyrus.servlet.TyrusServlet</servlet-class> <init-param> <param-name>org.glassfish.tyrus.servlet.websocketClassnames</param-name> <param-value>com.example.ChatEndpoint</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>chat</servlet-name> <url-pattern>/chat/*</url-pattern> </servlet-mapping> </web-app> ``` 在这个配置中，我们使用了`org.glassfish.tyrus.servlet.TyrusServlet`作为WebSocket的Servlet。我们将`com.example.ChatEndpoint`指定为WebSocket处理程序的类名，并将其加载到`servlet`中。 现在，我们就可以在HTML页面中使用WebSocket来连接我们的聊天室了： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WebSocket Chat</title> </head> <body> <input type="text" id="message"> <button onclick="send()">Send</button> <div id="output"></div> <script> var socket = new WebSocket('ws://localhost:8080/chat'); socket.onmessage = function (event) { var output = document.getElementById('output'); output.innerHTML += event.data + '<br>'; }; function send() { var message = document.getElementById('message').value; socket.send(message); } </script> </body> </html> ``` 在这个HTML页面中，我们创建了一个WebSocket连接到`ws://localhost:8080/chat`。当收到消息时，我们将其添加到页面上的`<div>`元素中。当点击发送按钮时，我们将输入框中的文本发送到WebSocket连接中。 这样，我们就完成了一个简易的Java WebSocket聊天室的实现。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值