通过websocket实现一个简单的聊天室功能

谢大帅哥 谢大帅哥     2022-09-23     206

关键词:

客户端:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>websoket</title>
 6 </head>
 7 <body>
 8     <h1>chat room</h1>
 9     <input type="text" id="msg" />
10     <button id="send">发送</button>
11     <script type="text/javascript">
12         var websocket = new WebSocket("ws://localhost:6666/");
13 
14         function showMsg(str){
15             var div = document.createElement(div);
16             div.innerHTML = str;
17             document.body.appendChild(div)
18         }
19 
20         websocket.onopen=function(){
21             console.log("open");
22             document.getElementById(send).onclick = function() {
23                 var txt = document.getElementById(msg).value;
24                 if (txt) {
25                     websocket.send(txt);
26                 }
27             }
28         }
29         websocket.onclose = function() {
30             console.log("close");
31         }
32         websocket.onmessage = function(e) {
33             console.log(e.data);
34             showMsg(e.data);
35         }
36     </script>
37 </body>
38 </html>

服务器端(node.js):

 1 var ws = require("nodejs-websocket")
 2 
 3 var port = 6666;
 4 
 5 var clientCount = 0;
 6 
 7 var server = ws.createServer(function (conn) {
 8     console.log("New connection")
 9     clientCount++
10     conn.nickname = "user" + clientCount
11     broadcast("******* "+conn.nickname + " comes in *******");
12 
13 
14     conn.on("text", function (str) {
15         console.log("Received "+str)
16         broadcast(conn.nickname + " say: " + str)
17     })
18 
19 
20     conn.on("close", function (code, reason) {
21         broadcast("******* " + conn.nickname + " left *******");
22     })
23     conn.on("error", function(err) {
24         console.log("error: "+err);
25     })
26 }).listen(port)
27 
28 console.log("websocket server listening on " + port);
29 
30 function broadcast (str) {
31     server.connections.forEach(function (connection) {
32         connection.sendText(str)
33     })
34 }

 

vue+websocket<简单实现聊天功能>(代码片段)

效果图:聊天室此篇文章是针对Websocket的简单了解和应用,利用Nodejs简单搭建一个服务器加以实现。首先创建一个vue项目然后再创建一个server文件夹,在终端上打开该文件夹,输入vueinit(一直敲"回车"键... 查看详情

java是如何实现客服在线聊天功能的?

...候,需要考虑客户端和服务端之间的通信协议。可以使用WebSocket协议,这是一种全双工通信协议,支持客户端和服务端之间的实时通信。Java提供了多个WebSocket实现,比如Tyrus、Jetty和Netty。实现服务端:在服务端实现在线聊天功... 查看详情

基于websocket实现网页版聊天室(代码片段)

  WebSocket,HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议,其使用简单,应用场景也广泛,不同开发语言都用种类繁多的实现,仅Java体系中,Tomcat,Jetty,Spring等都提供了对WS的API支持。本篇不做理论探究,仅自娱... 查看详情

使用socket.io实现简单的聊天功能(代码片段)

Socket.io实际上是WebSocket的父集,Socket.io封装了WebSocket和轮询等方法首先得在你的项目中安装socket.io$npminstallsocket.io服务端代码:varapp=require(‘http‘).createServer()vario=require(‘socket.io‘)(app)varPORT=5555;varclientCount=0;app 查看详情

习惯了微信聊天,利用websocket手动实现个聊天功能怎么样?(代码片段)

...也可以引入一些第三方的sdk包等去实现,也可以利用WebSocket通信协议去手动实现简单的聊天。本文主要讲述下WebSocket实现的具体步骤及实现的效果图。2.方案选型及优缺点介绍方案一利用http接口手动实现三个接口:sengMsg(... 查看详情

springboot——springboot集成websocket实现简单的多人聊天室(代码片段)

文章目录:1.什么是WebSocket?2.Java中的WebSocketAPI2.1WebSocket开发中的相关注解及API方法2.2前端技术对WebSocket的支持3.多人聊天室的实现源码3.1pom文件中添加相关依赖2.2在核心配置文件中配置视图解析器2.3加入相关静态资源文... 查看详情

使用 php 在 android 中使用 websocket 实现聊天

】使用php在android中使用websocket实现聊天【英文标题】:Implementchatusingwebsocketinandroidwithphp【发布时间】:2014-08-1705:55:04【问题描述】:我想通过php在android中使用websocket实现聊天功能。我需要同样的php代码。场景是这样的。android... 查看详情

springboot整合websocket实现即时聊天功能

参考技术A近期,公司需要新增即时聊天的业务,于是用websocket整合到Springboot完成业务的实现。一、我们来简单的介绍下websocket的交互原理:1.客户端先服务端发起websocket请求;2.服务端接收到请求之后,把请求响应返回给客户端... 查看详情

基于redis发布订阅和websocket实现聊天室功能

参考技术A同时在做消息的持久化的时候,可以利用Redis的Zset的特性来对历史消息进行存储。 查看详情

android使用websocket实现即时通讯功能,聊天功能

...不愿意花这份钱),那就得自己做了,所以我们需要使用WebSocket。一.Android实现即时通讯功能1.引入WebSock依赖2.创建一个java类并继承WebSocketClient其中onOpen()方法在websocket连接开启时调用,onMessage()方法在接收到消息时调用,onClose()... 查看详情

websocket介绍和一个简单的聊天室

WebSocket是什么呢?  WebSocket一种在单个TCP连接上进行全双工通讯的协议。WebSocket通信协议于2011年被IETF定为标准RFC6455,并被RFC7936所补充规范,WebSocketAPI被W3C定为标准。WebSocket是独立的、创建在TCP上的协议,和HTTP的唯一关联是... 查看详情

java中使用udp实现简单的聊天功能

通过DatagramSocket类来实现。此类表示用来发送和接收数据报包的套接字。发送端代码如下:23importjava.io.IOException;4importjava.net.*;5importjava.util.Scanner;67publicclassSendimplementsRunnable{8@Override9publicvoidrun(){10//创建一个发送消息的套接字1 查看详情

使用websocket实现网页聊天室(代码片段)

使用WebSocket实现网页聊天室一、文章导读服务器推送你还在使用轮询吗?本文将带你领略WebSocket的魅力,轻松实现服务器推送功能。本文将以下面两方面让你理解WebSocket并应用到具体的开发中WebSocket概述使用WebSocket实现... 查看详情

使用websocket构建实时聊天

...工通信(保持在一个连接中)时,HTTP就力不从心了。在Websocket出现之前,实现全双工通信的方式主要是ajax轮询和longpoll,这样是非常消耗性能的。WebSocket是HTML5新增加的特性之一,目前主流浏览器大都提供了对其的支持。其特点... 查看详情

ssh项目中使用websocket实现网页聊天功能

参考文章 :java使用websocket,并且获取HttpSession,源码分析  http://www.cnblogs.com/zhuxiaojie/p/6238826.html 1.在项目中引入依赖websocket遵循了javaee规范,所以需要引入javaee的包1<dependency>2<groupId>javax.w 查看详情

springboot整合websocket实现简单聊天室(代码片段)

项目结构:效果展示:实现步骤步骤一:添加依赖<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency> 查看详情

swoole用websocket服务器搭建一个简易的聊天室功能(代码片段)

swoole用WebSocket服务器搭建一个简易的聊天室功能域名无ssl加密域名有ssl加密开启服务端常链接浏览器分别开启两个客户端窗口,进行聊天域名无ssl加密WS.php写服务端代码<?phpclassWSprivate$ws=null;publicfunction__construct()//创建Web... 查看详情

swoole用websocket服务器搭建一个简易的聊天室功能(代码片段)

swoole用WebSocket服务器搭建一个简易的聊天室功能域名无ssl加密域名有ssl加密开启服务端常链接浏览器分别开启两个客户端窗口,进行聊天域名无ssl加密WS.php写服务端代码<?phpclassWSprivate$ws=null;publicfunction__construct()//创建Web... 查看详情