使用WebSocket实现多人实时聊天

最新推荐文章于 2024-02-10 13:29:26 发布
最新推荐文章于 2024-02-10 13:29:26 发布
阅读量3.8k 收藏 2
点赞数 1
分类专栏： # JavaWeb
如果本篇文章帮到了你，兄台何不留个言再走？什么！不想留言？不想留言也要点个赞吗，也算是缘分一场......什么！赞都不想点？管理员拿我的三十米大刀来！【左侧点击关注按钮，精彩好文不容错过】
本文链接：https://blog.csdn.net/qq_23994787/article/details/77543277
版权


一 应用
本应用使用WebSocket实现多人实时聊天
 
二 代码
客户端代码
Js代码   收藏代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  6.     <title> 使用WebSocket通信 </title>  
  7.     <script type="text/javascript">  
  8.         // 创建Web Socket对象  
  9.         var webSocket = new WebSocket("ws://127.0.0.1:30000");  
  10.         webSocket.onopen = function()  
  11.         {  
  12.             // 为onmessage事件绑定监听器，接收消息  
  13.             webSocket.onmessage= function(event)  
  14.             {  
  15.                 // 接收、并显示消息  
  16.                 document.getElementById('show').innerHTML   
  17.                     += event.data + "<br/>";  
  18.             }  
  19.         };  
  20.         var sendMsg = function(val)  
  21.         {  
  22.             var inputElement = document.getElementById('msg');  
  23.             // 发送消息  
  24.             webSocket.send(inputElement.value);  
  25.             // 清空单行文本框  
  26.             inputElement.value = "";  
  27.         }  
  28.     </script>  
  29. </head>  
  30. <body>  
  31. <div style="width:600px;height:240px;  
  32.     overflow-y:auto;border:1px solid #333;" id="show"></div>  
  33. <input type="text" size="80" id="msg" name="msg"/>  
  34. <input type="button" value="发送" οnclick="sendMsg();"/>  
  35. </body>  
  36. </html>  
 
服务器代码
Js代码   收藏代码
  1. import java.io.*;  
  2. import java.net.*;  
  3. import java.nio.charset.Charset;  
  4. import java.security.MessageDigest;  
  5. import java.util.regex.*;  
  6. import java.util.*;  
  7. import sun.misc.BASE64Encoder;  
  8. /** 
  9.  * Description: 
  10.  * <br/>网站: <a href="http://www.crazyit.org">疯狂Java联盟</a> 
  11.  * <br/>Copyright (C), 2001-2012, Yeeku.H.Lee 
  12.  * <br/>This program is protected by copyright laws. 
  13.  * <br/>Program Name: 
  14.  * <br/>Date: 
  15.  * @author Yeeku.H.Lee kongyeeku@163.com 
  16.  * @version 1.0 
  17.  */  
  18. public class ChatServer  
  19. {  
  20.     // 记录所有的客户端Soccket  
  21.     public static List<Socket> clientSockets  
  22.         = new ArrayList<Socket>();  
  23.     public ChatServer()throws IOException  
  24.     {  
  25.         // 创建ServerSocket，准备接受客户端连接  
  26.         ServerSocket ss = new ServerSocket(30000);  
  27.         while(true)  
  28.         {  
  29.             // 接收到客户端连接  
  30.             Socket socket = ss.accept();  
  31.             // 将客户端Socket添加到clientSockets集合中  
  32.             clientSockets.add(socket);  
  33.             // 启动线程  
  34.             new ServerThread(socket).start();  
  35.         }  
  36.     }  
  37.     public static void main(String[] args)  
  38.         throws Exception  
  39.     {  
  40.         new ChatServer();  
  41.     }  
  42. }  
  43. class ServerThread extends Thread  
  44. {  
  45.     private Socket socket;  
  46.     public ServerThread(Socket socket)  
  47.     {  
  48.         this.socket = socket;  
  49.     }  
  50.     public void run()  
  51.     {  
  52.         try  
  53.         {  
  54.             // 得到Socket对应的输入流  
  55.             InputStream in = socket.getInputStream();  
  56.             // 得到Socket对应的输出流  
  57.             OutputStream out = socket.getOutputStream();  
  58.             byte[] buff = new byte[1024];  
  59.             String req = "";  
  60.             // 读取数据，此时建立与WebSocket的"握手"。  
  61.             int count = in.read(buff);  
  62.             // 如果读取的数据长度大于0  
  63.             if(count > 0)  
  64.             {  
  65.                 // 将读取的数据转化为字符串  
  66.                 req = new String(buff , 0 , count);  
  67.                 System.out.println("握手请求：" + req);  
  68.                 // 获取WebSocket的key  
  69.                 String secKey = getSecWebSocketKey(req);  
  70.                 System.out.println("secKey = " + secKey);  
  71.                 String response = "HTTP/1.1 101 Switching Protocols\r\nUpgrade: "  
  72.                     + "websocket\r\nConnection: Upgrade\r\nSec-WebSocket-Accept: "  
  73.                         + getSecWebSocketAccept(secKey) + "\r\n\r\n";  
  74.                 System.out.println("secAccept = " + getSecWebSocketAccept(secKey));  
  75.                 out.write(response.getBytes());  
  76.             }  
  77.             int hasRead = 0;  
  78.             // 不断读取WebSocket发送过来的数据  
  79.             while((hasRead = in.read(buff)) > 0)  
  80.             {  
  81.                 System.out.println("接收的字节数：" + hasRead);  
  82.                 /* 
  83.                     因为WebSocket发送过来的数据遵循了一定的协议格式， 
  84.                     其中第3个～第6个字节是数据掩码。 
  85.                     从第7个字节开始才是真正的有效数据。 
  86.                     因此程序使用第3个～第6个字节对后面的数据进行了处理 
  87.                 */  
  88.                 for (int i = 0 ; i < hasRead - 6 ; i++ )  
  89.                 {  
  90.                     buff[i + 6] = (byte) (buff[i % 4 + 2] ^ buff[i + 6]);  
  91.                 }  
  92.                 // 获得从浏览器发送过来的数据  
  93.                 String pushMsg = new String(buff  
  94.                     , 6 , hasRead - 6 , "UTF-8");  
  95.                 // 遍历Socket集合，依次向每个Socket发送数据  
  96.                 for (Iterator<Socket> it = ChatServer.clientSockets.iterator()  
  97.                     ; it.hasNext() ;)  
  98.                 {  
  99.                     try  
  100.                     {  
  101.                         Socket s = it.next();  
  102.                         // 发送数据时，第一个字节必须与读到的第一个字节相同  
  103.                         byte[] pushHead = new byte[2];  
  104.                         pushHead[0] = buff[0];  
  105.                         // 发送数据时，第二个字节记录发送数据的长度  
  106.                         pushHead[1] = (byte) pushMsg.getBytes("UTF-8").length;  
  107.                         // 发送前两个字节  
  108.                         s.getOutputStream().write(pushHead);  
  109.                         // 发送有效数据  
  110.                         s.getOutputStream().write(pushMsg.getBytes("UTF-8"));  
  111.                     }  
  112.                     catch (SocketException ex)  
  113.                     {  
  114.                         // 如果捕捉到异常，表明该Socket已经关闭  
  115.                         // 将该Socket从Socket集合中删除  
  116.                         it.remove();  
  117.                     }  
  118.                 }  
  119.             }  
  120.         }  
  121.         catch (Exception e)  
  122.         {  
  123.             e.printStackTrace();  
  124.         }  
  125.         finally  
  126.         {  
  127.             try  
  128.             {  
  129.                 // 关闭Socket  
  130.                 socket.close();  
  131.             }  
  132.             catch (IOException ex)  
  133.             {  
  134.                 ex.printStackTrace();  
  135.             }  
  136.         }  
  137.     }  
  138.     // 获取WebSocket请求的SecKey  
  139.     private String getSecWebSocketKey(String req)  
  140.     {  
  141.         //构建正则表达式，获取Sec-WebSocket-Key: 后面的内容  
  142.         Pattern p = Pattern.compile("^(Sec-WebSocket-Key:).+",  
  143.                 Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);  
  144.         Matcher m = p.matcher(req);  
  145.         if (m.find())  
  146.         {  
  147.             // 提取Sec-WebSocket-Key  
  148.             String foundstring = m.group();  
  149.             return foundstring.split(":")[1].trim();  
  150.         }  
  151.         else  
  152.         {  
  153.             return null;  
  154.         }  
  155.     }  
  156.     // 根据WebSocket请求的SecKey计算SecAccept  
  157.     private String getSecWebSocketAccept(String key)  
  158.         throws Exception  
  159.     {  
  160.         String guid = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";  
  161.         key += guid;  
  162.         MessageDigest md = MessageDigest.getInstance("SHA-1");  
  163.         md.update(key.getBytes("ISO-8859-1") , 0 , key.length());  
  164.         byte[] sha1Hash = md.digest();  
  165.         BASE64Encoder encoder = new BASE64Encoder();  
  166.         return encoder.encode(sha1Hash);  
  167.     }  
  168. }  
 
 
三 运行结果

 
心歌技术
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
SpringBoot WebSocket消息推送（群发和指定到个人或多人）
10-11
SpringBoot WebSocket消息推送（群发和指定到个人或多人）,导入项目可以直接运行。
vue如何使用webscorket实现多人协同在线表格填写
m0_51354601的博客
07-16 1172
通过这种方式，当一个用户填写或修改表格时，更新的数据将通过WebSocket发送到服务器，然后服务器会将这些更新广播给其他连接的客户端，从而实现多人协同在线表格填写的功能。在上述代码中，通过创建WebSocket连接并监听服务器发送的表格数据，你可以在。中保存当前表格的数据。当其他用户更新表格时，服务器会发送。方法来更新本地的表格数据。事件，然后你可以调用。
Vue+WebSocket-实现多人聊天室
benlalagang的博客
11-04 4297
Vue+WebSocket-实现多人聊天室
WebSocket 通信流程，注解和Spring实现WebSocket ，实战多人聊天室系统
最新发布
m0_52226803的博客
02-10 2098
实现即时通信常见的有四种方式-分别是：轮询、长轮询(comet)、长连接(SSE)、WebSocket。轮询（Polling）长轮询（Long-Polling）Websocket长连接（SSE）通信协议httphttptcphttp触发方式client(客户端)client(客户端)client、server(客户端、服务端)client、server(客户端、服务端)优点兼容性好容错性强，实现简单比短轮询节约资源全双工通讯协议，性能开销小、安全性高，可扩展性强。
Vue实时通信 实现用webSocket长连接聊天功能
limmt2020的博客
09-12 1230
Vue实时通信 实现用webSocket长连接聊天功能 1.安装vue-cli 2.init 初始化项目 3.npm install ws(websocket) 4.文件夹中创建server.js 1、服务器代码 //index.js //启动web服务，监听3000端口 绑定socket.io服务，接受websocket连接请求 const http = require('http').createServer(); const express = require('express') // 创建webs
Vue+Websocket实现多人在线王者飞机（一）
weixin_34026276的博客
03-01 212
看了Vue官方教程，想找个项目练练手（没找到好的），就写个飞机大战吧。飞机大战总共三个页面：登录、匹配、游戏页面，三个页面的功能：1、 登录：玩家填写用户名，socket连接2、匹配：等待其他玩家准备3、游戏：战斗页面上述流程仿照了王者荣耀，所以就叫王者飞机（当然和王者荣耀相差十万八千里）最终效果：git地址：https://gitee.com/djxfire/PlaneWar.git根据上面的设...
SharedWorker 共享工作者线程 websocket 及 vue中使用
jinke0010的博客
04-18 3456
SharedWorker 共享工作者线程 最近搞了个websocket通讯，但是发现在多开浏览器页签的时候ws也会多开一个，但是基于浏览器机制情况下 chrome会干掉新开的页签导致新页签查看GG了， 只能开一个页签这就很蛋疼了。 然后百度了很久发现都是一些介绍通过websocket解决多页签通讯的文章（还要服务端配合），无奈之下啃了一下高程。 发现了这个-----SharedWorker 前言 SharedWorker 在当前客户端下创建一个共享线程，每一个页签的通讯通过其中的port来传递和接收。
websocket 和vue 实现简易局域网多人聊天
porn91lsj的博客
06-16 412
共分为两个界面，一个websocket服务器js页，一个vue.config.js页，一个路由页，用了vant UI 版本2.12.54，vue版本2.6.14 记得npm install ws模块 版本8.13.0,使用的node版本16.14.0。
vue-springboot：webSocket的使用，同步购物车实例
荼蘼_的博客
07-14 926
websocket的实现+代码，亲测可用
基于vue和websocket的多人在线聊天室
10-15
主要介绍了基于vue和websocket的多人在线聊天室,需要的朋友可以参考下
webChat使用websocket实现网页多人聊天
07-03
webChat使用websocket实现网页多人聊天
Springboot+websocket 实现多人聊天室/单人聊天
10-11
这是一个简单使用websocket实现多人聊天室，单人聊天室的demo，里面使用的是最原始的websocket的方法，附有客户端界面可以直接跑起来发送消息看效果。 该项目对应刚刚接触websocket技术是比较有用的。 2019-10-11的...
spring boot整合WebSocket实现多人聊天室的实例
04-14
spring boot整合WebSocket + stomp 协议实现多人聊天室的实例
websocket实现多人聊天
06-07
简单websocket实现在线群聊功能 1、通过登录获取每个用户的昵称，在发送消息前加“昵称说：” 2、通过websocket推送到前台页面聊天消息
nodejs+websocket实现简单的多人聊天
05-06
nodejs+websocket实现简单的多人聊天
java利用websocket实现多人聊天室（springmvc框架）
05-22
环境：eclipse+jdk1.8+tomcat8 项目启动后访问链接：http://localhost:8080/Chatroom/home/list.do
nodejs项目_多人群聊实现其实很简单：Nodejs+WebSocket+Vue轻松实现Web IM
weixin_39572764的博客
11-29 237
点击右上方红色按钮关注“web秀”，让你真正秀起来前言在《Nodejs + WebSocket简单介绍及示例 - 第一章》中简单的介绍了，Nodejs + WebSocket的使用方法及作用，今天就用它来搭建一个简单的聊天室功能。1、Nodejs+WebSocket创建后台服务器功能 2、Vue视图层，接收后台数据并渲染页面 3、LocalStorage存储会话ID等用户信息vue + webpa...
Vue 中WebSocket的使用
weixin_43858329的博客
10-19 1037
data() { return { websock: null, } },created() { this.initWebSocket(); }, destroyed() { this.websock.close() //离开路由之后断开websocket连接 }, methods: { initWebSocket(){ //初始化weosocket const wsuri .
vue 中，运用WebSocket通信，解决前端轮询问题和多用户数据共享问题
Gavid的博客
01-19 4246
vue 中，运用WebSocket通信，解决前端轮询问题和多用户数据共享问题需求描述：最初实现方式：问题描述问题解决方式WebSocket 简介WebSocket 规范WebSocket 握手协议WebSocket 实战( **Vue中进行使用** )参考文档： 需求描述： 最近做项目有这样一个需求：后台需要实时的将数据推送到前端进行显示，且实现数据在多个终端进行接受。 最初实现方式： 由于前端项...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

心歌技术

打赏不能超过你的早餐钱！！！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值