WebSocket入门教程（五）-- WebSocket实例：简单多人聊天室

from:https://blog.csdn.net/u010136741/article/details/51612594

【总目录】

WebSocket入门教程--大纲

【实例简介】

本文，我们通过nodejs和javascript实现一个网页聊天室的demo。主要包括，聊天，改用户名，查看其他用户在线状态的功能。大致流程为，用户访问网页，即进入聊天状态，成为新游客，通过底部的输入框，可以输入自己想说的话，点击发布，信息呈现给所有在聊天的人的页面。用户可以实时修改自己的昵称，用户离线上线都会实时广播给其他用户！

【效果图】

【客户端】

web页面主要呈现在线人数，聊天信息，一个输入框和发送按钮，上代码:

[html] view plain copy

  1. <!DOCTYPE html>
  2. <html lang="cn">
  3. <head>
  4. <title>WebSocket chart application</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css">
  8. <link rel="stylesheet" href="http://cdn.bootcss.com/tether/1.3.2/css/tether.css"/>
  9. <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js" ></script>
  10. <script src="http://cdn.bootcss.com/tether/1.3.2/js/tether.js"></script>
  11. <script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.js"></script>
  12. <script>
  13. var ws= new WebSocket(‘ws://www.liumumu.top:8180‘);
  14. var nickname;
  15. ws.onopen = function(e){
  16. console.log(‘Connection to server opened‘);
  17. }
  18. function appendLog(type,nickname, message,clientcount) {
  19. var messages = document.getElementById(‘messages‘);
  20. var messageElem = document.createElement("li");
  21. var preface_label;
  22. if(type===‘notification‘) {
  23. preface_label = "<span class=\"label label-info\">*</span>";
  24. } else if(type===‘nick_update‘) {
  25. preface_label = "<span class=\"label label-warning\">*</span>";
  26. } else {
  27. preface_label = "<span class=\"label label-success\">" + nickname + "</span>";
  28. }
  29. var message_text = "<h2>" + preface_label + "  " + message + "</h2>";
  30. messageElem.innerHTML = message_text;
  31. messages.appendChild(messageElem);
  32. var count_people = document.getElementById("count_people");
  33. count_people.innerHTML = clientcount;
  34. }
  35. ws.onmessage = function(e){
  36. var data = JSON.parse(e.data);
  37. nickname = data.nickname;
  38. appendLog(data.type,data.nickname, data.message,data.clientcount);
  39. console.log("ID: [%s] = %s", data.id, data.message);
  40. }
  41. function sendMessage(){
  42. var message = $(‘#message‘).val().trim();
  43. if(message.length<1){
  44. alert("不能发送空内容！");
  45. return;
  46. }
  47. ws.send($(‘#message‘).val());
  48. $(‘#message‘).val("");
  49. $(‘#message‘).focus();
  50. console.log(ws.bufferedAmount);
  51. }
  52. </script>
  53. </head>
  54. <body lang="cn">
  55. <div class="vertical-center">
  56. <div class="container">
  57. <h2>多人在线聊天DEMO</h2>
  58. <hr />
  59. <p>当前在线人数：<span id="count_people">0</span></p>
  60. <ul id="messages" class="list-unstyled">
  61. </ul>
  62. <hr />
  63. <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
  64. <div class="form-group">
  65. <input class="form-control" type="text" name="message" id="message"
  66. placeholder="输入聊天内容" value="" autofocus/>
  67. </div>
  68. <button type="button" id="send" class="btn btn-primary"
  69. onclick="sendMessage();">发送!</button>
  70. </form>
  71. </div>
  72. </div>
  73. </body>
  74. </html>

javascript 部分，连接websocket成功之后，主要是监听数据返回，和发送数据。

当用户编辑好内容，点击发送按钮是调用sendMessage方法，发送数据，如果需要修改昵称，则发送数据格式为"/nick 昵称"。

当服务器返回数据到客户端，我们通过appendLog方法对数据做处理，根据type字段，判断是显示用户离线在线信息，还是显示聊天信息。最后更新在线人数。

【服务器端】

服务器端主要是接收信息，判断是聊天信息还是重命名信息，然后发送广播。同时，当用户连接上服务器端或者关闭连接时，服务器也会发送广播通知其他用户。

[javascript] view plain copy

  1. var WebSocket = require(‘ws‘);
  2. var WebSocketServer = WebSocket.Server,
  3. wss = new WebSocketServer({port: 8180});
  4. var uuid = require(‘node-uuid‘);
  5. var clients = [];
  6. function wsSend(type, client_uuid, nickname, message,clientcount) {
  7. for(var i=0; i<clients.length; i++) {
  8. var clientSocket = clients[i].ws;
  9. if(clientSocket.readyState === WebSocket.OPEN) {
  10. clientSocket.send(JSON.stringify({
  11. "type": type,
  12. "id": client_uuid,
  13. "nickname": nickname,
  14. "message": message,
  15. "clientcount":clientcount,
  16. }));
  17. }
  18. }
  19. }
  20. var clientIndex = 1;
  21. wss.on(‘connection‘, function(ws) {
  22. var client_uuid = uuid.v4();
  23. var nickname = "游客"+clientIndex;
  24. clientIndex+=1;
  25. clients.push({"id": client_uuid, "ws": ws, "nickname": nickname});
  26. console.log(‘client [%s] connected‘, client_uuid);
  27. var connect_message = nickname + " 来了";
  28. wsSend("notification", client_uuid, nickname, connect_message,clients.length);
  29. ws.on(‘message‘, function(message) {
  30. if(message.indexOf(‘/nick‘) === 0) {
  31. var nickname_array = message.split(‘ ‘);
  32. if(nickname_array.length >= 2) {
  33. var old_nickname = nickname;
  34. nickname = nickname_array[1];
  35. var nickname_message = "用户 " + old_nickname + " 改名为： " + nickname;
  36. wsSend("nick_update", client_uuid, nickname, nickname_message,clients.length);
  37. }
  38. } else {
  39. wsSend("message", client_uuid, nickname, message,clients.length);
  40. }
  41. });
  42. var closeSocket = function(customMessage) {
  43. for(var i=0; i<clients.length; i++) {
  44. if(clients[i].id == client_uuid) {
  45. var disconnect_message;
  46. if(customMessage) {
  47. disconnect_message = customMessage;
  48. } else {
  49. disconnect_message = nickname + " 走了";
  50. }
  51. clients.splice(i, 1);
  52. wsSend("notification", client_uuid, nickname, disconnect_message,clients.length);
  53. }
  54. }
  55. }
  56. ws.on(‘close‘, function() {
  57. closeSocket();
  58. });
  59. process.on(‘SIGINT‘, function() {
  60. console.log("Closing things");
  61. closeSocket(‘Server has disconnected‘);
  62. process.exit();
  63. });
  64. });

我们定义了wsSend函数用来处理消息的广播。对每个连接的用户，我们默认给他分配为游客。为了实现广播，我们用clients数组来保存连接的用户。

原文地址：https://www.cnblogs.com/liuqiyun/p/8668576.html

时间： 2024-10-22 10:17:18

WebSocket入门教程（五）-- WebSocket实例：简单多人聊天室的相关文章

Spring WebSocket初探2 (Spring WebSocket入门教程)&lt;转&gt;

See more: Spring WebSocket reference整个例子属于WiseMenuFrameWork的一部分,可以将整个项目Clone下来,如果朋友们有需求,我可以整理一个独立的demo出来. 接上一篇:Spring WebSocket初探1 (Spring WebSocket入门教程) WebSocket前端准备 前端我们需要用到两个js文件:sockjs.js和stomp.js SockJS:SockJS 是一个浏览器上运行的 JavaScript 库,如果浏览器不支持 W

Spring MVC注解配置结合Hibernate的入门教程及其代码实例

原文:Spring MVC注解配置结合Hibernate的入门教程及其代码实例 源代码下载地址:http://www.zuidaima.com/share/1787210045197312.htm 1.概述 本文旨在搭建Spring MVC+Hibernate开发框架,通过一个简单的demo讲解Spring MVC的相关配置文件,以及通过注解方式实现简单功能. 开发框架:Spring+Spring MVC+Hibernate(Spring所用的版本为3.0.5). 数据库:MySQL(数据库名称

RabbitMQ入门教程(五)：扇形交换机发布/订阅(Publish/Subscribe)

原文:RabbitMQ入门教程(五):扇形交换机发布/订阅(Publish/Subscribe) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/vbirdbest/article/details/78628659 分享一个朋友的人工智能教程.比较通俗易懂,风趣幽默,感兴趣的朋友可以去看看. 简介 本节主要演示交换机的广播类型fanout,广播类型不需要routingKey,交换机会将所有

Elasticsearch入门教程(五)：Elasticsearch查询(一)

原文:Elasticsearch入门教程(五):Elasticsearch查询(一) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/vbirdbest/article/details/79228852 // 准备数据 PUT /shop/goods/1 { "name": "2017新款女装冬季外套ulzzang棉袄中长款棉衣韩版百搭棉服面包服", &quo

Scrapy安装、爬虫入门教程、爬虫实例（豆瓣电影爬虫）

Scrapy在window上的安装教程见下面的链接:Scrapy安装教程 上述安装教程已实践,可行.本来打算在ubuntu上安装Scrapy的,但是Ubuntu 磁盘空间太少了,还没扩展磁盘空间,暂时不想再上面装太多软件. Scrapy的入门教程见下面链接:Scrapy入门教程 上面的入门教程是很基础的,先跟着作者走一遍,要动起来哟,不要只是阅读上面的那篇入门教程,下面我简单总结一下Scrapy爬虫过程: 1.在Item中定义自己要抓取的数据: movie_name就像是字典中的“键”,爬到的数

无废话ExtJs 入门教程五[文本框：TextField]

无废话ExtJs 入门教程五[文本框:TextField] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个文本框.如下所示代码区的第42行位置,items: [txtusername, txtpassword]. 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

实现一个简单的语音聊天室（多人语音聊天系统）

多人语音聊天,或语音聊天室,是即时通信应用中常见的功能之中的一个,比方,QQ的语音讨论组就是我们用得比較多的. 本文将基于最新版本号的OMCS(V3.5)实现一个简单的语音聊天室,让多个人能够进入同一个房间进行语音沟通.当然,在此之前,您必须对OMCS有所了解,而且已经阅读.理解了OMCS 开发手冊(08) -- 多人语音/视频这篇文章的内容.先看看Demo执行效果截图:        从左到右的三张图各自是:登录界面.语音聊天室的主界面.标注了各个控件的主界面. 一. C/S结构 非常明显,我

实现一个简单的语音聊天室（源码）

语音聊天室,或多人语音聊天,是即时通信应用中常见的功能之一,比如,QQ的语音讨论组就是我们用得比较多的. 这篇文章将实现一个简单的语音聊天室,让多个人可以进入同一个房间进行语音沟通.先看运行效果截图:         从左到右的三张图分别是:登录界面.语音聊天室的主界面.标注了各个控件的主界面. (如果觉得界面太丑,没关系,后面下载源码后,你可以自己美化~~) 一. C/S结构 很明显,我这个语音聊天室采用的是C/S结构,整个项目结构相对比较简单,如下所示: 该项目的底层是基于OMCS构建的.这

实现一个简单的视频聊天室（源码）

在 <实现一个简单的语音聊天室>一文发布后,很多朋友建议我也实现一个视频聊天室给他们参考一下,其实,视频聊天室与语音聊天室的原理是差不多的,由于加入了摄像头.视频的处理,逻辑会繁杂一些,本文就实现一个简单的多人视频聊天系统,让多个人可以进入同一个房间进行语音视频沟通.先看看3个人进行视频聊天的运行效果截图:       上面两张截图分别是:登录界面.标注了各个控件的视频聊天室的主界面. 一. C/S结构 很明显,我这个语音聊天室采用的是C/S结构,整个项目结构相对比较简单,如下所示: 同语音聊