WebSocket实现简单聊天室

最新推荐文章于 2024-07-20 08:00:00 发布
最新推荐文章于 2024-07-20 08:00:00 发布
阅读量835 收藏 1
点赞数
分类专栏： node 文章标签： WebSocket 聊天室
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40970987/article/details/84378486
版权

看了之前的文章，想必大家对WebSocket的原理已经有了一个深入的理解，这一篇文章我们来看一下具体该如何去使用它。
这里，我用nodejs-websocket实现一个简单的多人聊天室，从这个小案例中来学会使用WebSocket。
nodejs-websocket用法参见官方api：
https://www.npmjs.com/package/nodejs-websocket
服务器端：

//安装引入nodejs-websocket
var ws = require('nodejs-websocket');
console.log("开始建立连接...")
//创建服务
var server = ws.createServer((conn) => {
	conn.on("text", (str) => {
        console.log("接收的信息 "+str)
        //发送信息
        broadcast(str)
    })
    conn.on("close", (code, reason) => {
        console.log("关闭连接")
    })
})
function broadcast(str) {
	//把消息发送到每一个连接服务的客户端
    server.connections.forEach(function(connection) {
        connection.sendText(str);
    })
}
//监听端口
server.listen(3000)
console.log("WebSocket建立完毕")

客户端：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室1</title>
    <script src="http://static.wanlianjin.com/data/m/wlcs/js/nocar/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <ul id="messages"></ul>
    <input id="m" autocomplete="off" /><button>Send</button>

    <script>
       if(window.WebSocket){
       	//连接服务器地址
            var ws = new WebSocket('ws://100.39.8.55:3000');
            ws.onopen = function(e){
                console.log("连接服务器成功");
                $('button').click(() => {
                    if($('#m').val()){
                       //发送消息
                        ws.send('小红:'+$('#m').val());
                        $('#m').val('')
                    }
                })
            }
            ws.onclose = function(e){
                console.log("服务器关闭");
            }
            ws.onerror = function(){
                console.log("连接出错");
            }
			//接收消息
            ws.onmessage = function(e){
                $('#messages').append('<li>'+ e.data +'</li>')   
            }
        }
    </script>
</body>
</html>
star-1331
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
websocket实现一对一聊天
09-30
基于tomcat的websocket,实现的一对一通讯，支持https协议。
Springboot+websocket 实现多人聊天室/单人聊天
10-11
这是一个简单使用websocket实现多人聊天室，单人聊天室的demo，里面使用的是最原始的websocket的方法，附有客户端界面可以直接跑起来发送消息看效果。 该项目对应刚刚接触websocket技术是比较有用的。 2019-10-11的...
webSocket实现聊天
最新发布
weixin_52096141的博客
07-20 405
需求描述：可与商家进行聊天，不论商家在线不在线 实现思路：对发送消息进行缓存(redis)，对方在线即发送实时消息，在线不在线都对消息进行缓存，形成聊天记录，点击对话框对缓存消息进行读取，并定时将redis中的缓存数据存入数据库！！！
webSocket+Node+Js实现在线聊天（包含所有代码）
见贤思齐焉，见不贤内自省
05-24 1315
webSocket+Node+Js实现在线聊天（包含所有代码）
Websocket实现简易聊天室功能
我的鱼要死了的博客
12-06 528
WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 WebSocke
Node.js实现WebSocket聊天室的例子
weixin_34166472的博客
06-03 322
对于聊天室，大家应该都不陌生，笔者也写过很多关于聊天室的例子。 本...
websocket实现简易聊天室
qq_47199913的博客
04-27 3492
websocket
Android使用Websocket实现聊天室
08-27
本文主要介绍了 Android 使用 WebSocket 实现聊天室的相关知识点，包括 WebSocket 的基本概念、Android 中使用 WebSocket 的库 Autobahn|Android、WebSocket 的特点、使用 WebSocket 实现聊天室的步骤等。...
安卓android+WebSocket实现简易QQ聊天室
01-03
2.websocket后端实现细节戳此链接spring boot练习–利用websocket实现QQ聊天室 界面展示 说明 有两个界面，第一个是登陆界面，我借用了我之前实现的登陆界面，并做了一些微调。需要输入ID和名字，测试的时候输入的ID...
springboot集成websocket实现一个简易聊天室
03-28
以上就是使用Spring Boot集成WebSocket实现一个简单聊天室的基本步骤。当然，实际应用可能需要考虑更多细节，比如用户认证、错误处理、消息持久化等。这个示例旨在为你提供一个起点，帮助你理解如何在Spring Boot...
利用html5的websocket实现websocket聊天室
09-28
WebSocket 的应用远不止聊天室，它可以用于实时股票报价、在线游戏、协作编辑等多种场景，因为它能够提供低延迟、高效的双向通信。然而，也需要注意 WebSocket 的跨域问题和安全性，例如实施适当的认证和授权机制来...
websocket聊天室
02-20
使用websocket技术实现的网络聊天室，主要功能是实现在登录聊天室之后，在聊天室中群发消息、私发消息等，使用的语言：前端使用的JSP，后端使用的JAVA
websocket聊天室，学习websocket的好例子。
05-25
Tomcat7 Ext4. WebSocket 聊天室，经过优化的，具有详细注释的，学习WebSocket的经典例子。
websocket聊天系统
06-29
websocket聊天系统 twaver.js请向tw-service # servasoft.com申请...
JAVA+WebSocket聊天室（WebSocket示例）
11-18
说明 HTML5 WebSocket 的出现，可以实现服务端-客户端高效低功耗完美双向通信。可惜现在不是所有浏览器都支持HTML5，本例是对TOMCAT7.0.32自带的WebSocket功能展示，一个非常简单的聊天室。 代码说明 1、因为本例只做功能展示，所以使用最为精简的代码，只写了2个类和一个JSP，另外使用到TOMCAT7下的catalina.jar 和 tomcat-coyote.jar 2、所有连接的对象放到Vector中，每个对象代表一个连接 注意事项 1 TOMCAT从7.0.27开始支持WEBSOCKET,本例是在TOMCAT7.0.32下开发的 2 目前谷歌、火狐、360急速、IE9（未测试过）都支持WEBSOCKET 3 lib下的catalina.jar 和 tomcat-coyote.jar取自TOMCAT7.0.32，所以如果部署在TOMCAT7.0.32上就重复了，那么删除WebSocketDemo1/WebRoot/WEB-INF/lib/*.jar 如果部署在其它版本的TOMCAT可以保留（未试过）。
WebSocket实现聊天功能
qq_51076413的博客
05-08 8444
SpringBoot + WebSocket技术实现在线聊天功能、一对一在线聊天功能，WebSocket实现一对一在线聊天，Java实现在线聊天功能
使用WebSocket实现网页聊天室
黑马程序员官方博客
11-23 5267
WebSocket 是一种网络通信协议。RFC6455 定义了它的通信标准。WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。
WebSocket实现聊天室
Gemini_Kanon的博客
02-15 763
原著地址：https://blog.csdn.net/qq_36899469/article/details/78477217 最近小编又犯愁了，项目需求做一个实时的在线客服，小编又是上网各处找办法，最后锁定了一项技术WebSocket，但是对于小编来说这项技术只是听说过，从来没使用过，网上找的各种代码不是只有前端就是只有后端，简直要把我弄疯了，时隔三日我找到了如上链接里的代码，属实帮助到了我~...
WebSocket(5)---多人聊天系统
后端元宇宙
04-03 801
多人聊天系统 功能说明：多人聊天系统，主要功能点： 1、当你登陆成功后，可以看到所有在线用户（实际开发可以通过redis实现，我这边仅仅用map集合） 2、实现群聊功能，我发送消息，大家都可以看到。 先看案例效果： 这里面有关在线人数有个bug,就是在线用户会被覆盖，lisi登陆的话，zhangsan在线信息就丢来，xiaoxiao登陆，lisi就丢来，这...
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、付费专栏及课程。

余额充值