一：下面是一个简单的案例，回车发送消息，多人在线聊天

1.前端代码

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>WebSocket Chat</title>

</head>

<body>

	<script type="text/javascript">

		var socket;

		if (!window.WebSocket) {

			window.WebSocket = window.MozWebSocket;

		}

		if (window.WebSocket) {

			socket = new WebSocket("ws://10.22.12.12:8080/ws");

			socket.onmessage = function (event) {

				var ta = document.getElementById('responseText');

				ta.value = ta.value + '\n' + event.data

			};

			socket.onopen = function (event) {

				var ta = document.getElementById('responseText');

				ta.value = "连接开启!";

			};

			socket.onclose = function (event) {

				var ta = document.getElementById('responseText');

				ta.value = ta.value + "连接被关闭";

			};

		} else {

			alert("你的浏览器不支持 WebSocket！");

		}

		function send(message) {

			if (!window.WebSocket) {

				return;

			}

			if (socket.readyState == WebSocket.OPEN) {

				socket.send(message);

			} else {

				alert("连接没有开启.");

			}

		}

    document.onkeydown=function(event){

    var code = event.keyCode;

    if(code ==13){ //这是键盘的enter监听事件

        //绑定焦点，有可能不成功，需要多试试一些标签

        document.getElementById("mySend").onclick();

        setTimeout(()=>{

          document.getElementById("myInput").value = ''

        },50)

    }

}

	</script>

	<form onsubmit="return false;">

		<h3>WebSocket 聊天室：</h3>

		<textarea id="responseText" style="width: 500px; height: 300px;"></textarea>

		<br>

		<input type="text" id="myInput" name="message" style="width: 300px" value="Hello~~~">

		<input type="button" id="mySend" value="发送消息" onclick="send(this.form.message.value)">

		<input type="button" onclick="javascript:document.getElementById('responseText').value=''"

			value="清空聊天记录">

	</form>

	<br>

</body>

</html>

2.后端代码

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('open', function open() {

  console.log('connected');

});

server.on('close', function close() {

  console.log('disconnected');

});

server.on('connection', function connection(ws, req) {

  const ip = req.connection.remoteAddress;

  const port = req.connection.remotePort;

  const clientName = ip + port;

  console.log('%s is connected', clientName)

  // 发送欢迎信息给客户端

  ws.send("Welcome " + clientName);

  ws.on('message', function incoming(message) {

    console.log('received: %s from %s', message, clientName);

    // 广播消息给所有客户端

    server.clients.forEach(function each(client) {

      if (client.readyState === WebSocket.OPEN) {

        client.send( clientName + " -> " + message);

      }

    });

  });

});

参考文章：https://waylau.com/node.js-websocket-chat/

webSocket前端+nodejs后端简单案例多人在线聊天的更多相关文章

  1. php使用swoole实现一个简单的多人在线聊天群发

    聊天逻辑的好多细节没有实现,只实现群发. php代码: $serv = new swoole_websocket_server("127.0.0.1",3999); //服务的基本 ...

  2. 基于JQuery+JSP的无数据库无刷新多人在线聊天室

    JQuery是一款非常强大的javascript插件,本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室,该实现的数据全部存储在服务端内存里,没有用到数据库,本文会提供所有源程序,需要 ...

  3. javaweb学习路之三--websocket多人在线聊天

    在之前的项目基础上,加入了一个聊天室的功能,为了界面好看 引入了AmazeUI和umeditor最终效果图如下: 源码在 https://github.com/Zering/MyWeb 目前练习都在这 ...

  4. 用NodeJS打造多人在线聊天室（NodeJS & SocketIO & Express & EJS & MongoDB & Gulp）

    项目背景 这个项目主要是为了玩玩NodeJS,项目的方向大概是做出类似QQ的在线聊天系统.想要在线体验可以点击在线演示. 项目使用PM2进行部署和管理,功能在不断的迭代开发中.如果你觉得这个项目比较有 ...

  5. Vue2 全家桶仿 微信App 项目，支持多人在线聊天和机器人聊天

    前言 这个项目是利用工作之余写的一个模仿微信app的单页面应用,整个项目包含27个页面,涉及实时群聊,机器人聊天,同学录,朋友圈等等,后续页面还是开发中.写这个项目主要目的是练习和熟悉vue和vuex ...

  6. 一个Java编写的小玩意儿---多人在线聊天工具

    这个在线聊天工具小项目使用JAVA编写,用JAVA来做图形界面本来就是出了名的低效和丑陋.不过这不是重点.写这个小项目的目的在于串一串J2SE的知识,把当时写这个项目的时候的思路梳理一下.时间有点久了 ...

  7. Unity3d多人在线教程

    [转载]Unity3d多人在线教程 (2013-02-25 16:02:49) 转载▼ 标签: 转载   原文地址:Unity3d多人在线教程作者:lsy0031 Unity 多个玩家开发教程 Uni ...

  8. 看完让你彻底理解 WebSocket 原理，附完整的实战代码（包含前端和后端）

    1.前言 最近有同学问我有没有做过在线咨询功能.同时,公司也刚好让我接手一个 IM 项目.所以今天抽时间记录一下最近学习的内容.本文主要剖析了 WebSocket 的原理,以及附上一个完整的聊天室实战 ...

  9. 基于SpringBoot+WebSocket搭建一个简单的多人聊天系统

    前言   今天闲来无事,就来了解一下WebSocket协议.来简单了解一下吧. WebSocket是什么   首先了解一下WebSocket是什么?WebSocket是一种在单个TCP连接上进行全双工 ...

  10. 对一个前端AngularJS,后端OData,ASP.NET Web API案例的理解

    依然chsakell,他写了一篇前端AngularJS,后端OData,ASP.NET Web API的Demo,关于OData在ASP.NET Web API中的正删改查没有什么特别之处,但在前端调 ...

随机推荐

  1. .Net Core&RabbitMQ限制循环消费

    前言 当消费者端接收消息处理业务时,如果出现异常或是拒收消息将消息又变更为等待投递再次推送给消费者,这样一来,则形成循环的条件. 循环场景 生产者发送100条消息到RabbitMQ中,消费者设定读取到 ...

  2. k8s集权IP更换

    -.背景描述 背景:在场内进行部署完成后标准版产品,打包服务器到客户现场后服务不能正常使用,因为客户现场的IP地址不能再使用场内的IP,导致部署完的产品环境在客户现场无法使用:此方案就是针对这一问题撰 ...

  3. k8s挂在问题

    今天在重启pod这个后发现一直处于 然后去describe发现报错如下 先去手动mount的发现挂在不了 然后去slave节点发现这个没有安装 然后手动去安装后重启pod问题解决

  4. RAID5部署

    软RAID与备份盘 1.此处我们还用刚才的4块盘做演示,三块盘做raid,一块盘做备份盘,防止磁盘故障 我们以raid 5 来配置三块磁盘 加上一块备份盘 [root@local-pyyu tmp]# ...

  5. JS逆向实战6-- x轴 y轴 过点触验证码

    点触验证码是一种常见的反爬手段 解决方案有两种:一种是直接解决,这需要深度学习机器学习等图像处理技术,以大量的数据训练识别模型,最终达到模型足矣识别图片中的文字提示和应该点击的区域之间的对应关系. 这 ...

  6. Perl语言中一些内置变量等，$x、qw、cmp、eq、ne等

    转载 Perl语言中一些内置变量等,$x.qw.cmp.eq.ne等 字母 符号 释义 eq  = = equal(等于) ne != not equal(不等于) cmp 比较 qq  " ...

  7. Go语言核心36讲35

    到目前为止,我们已经一起学习了Go语言标准库中最重要的那几个同步工具,这包括非常经典的互斥锁.读写锁.条件变量和原子操作,以及Go语言特有的几个同步工具: sync/atomic.Value: syn ...

  8. OpenCV之C++经典案例

    四个案例实战 1.刀片缺陷检测 2.自定义对象检测 3.实时二维码检测 4.图像分割与色彩提取 1.刀片缺陷检测 问题分析 解决思路 尝试二值图像分析 模板匹配技术 代码实现 #include < ...

  9. python3爬取CSDN个人所有文章列表页

    前言 我之前写了下载单篇文章的接口函数,结合这篇写的,就可以下载所有个人的所有文章了 代码实现 没什么技术含量就是简单的 xpath 处理,不过有意思的是有一位csdn 员工将自己的博客地址写到源码里 ...

  10. [.NET学习] EFCore学习之旅 -3 一些其他的迁移命令

    1.Update-DataBase  xxx 概述:将数据库回滚到某个版本. 1.首先创建一个表 Dog 2.生成迁移 Add-Migration CreateDogTable 并更新到数据库 Upd ...