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

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. Golang 和Python 几个小时前 几分钟 几天前的处理

    在用golang爬虫的时候 总会遇到 10天前 10分钟前 刚刚这种很影响我们爬取正常事件 所以我写了个方法 来格式化这种事件 golang 版本 package utils import ( &qu ...

  2. 京东云开发者｜经典同态加密算法Paillier解读 - 原理、实现和应用

    摘要 随着云计算和人工智能的兴起,如何安全有效地利用数据,对持有大量数字资产的企业来说至关重要.同态加密,是解决云计算和分布式机器学习中数据安全问题的关键技术,也是隐私计算中,横跨多方安全计算,联邦学 ...

  3. day20-web开发会话技术02

    WEB开发会话技术02 6.Cookie的生命周期 默认情况下,Cookie只在浏览器的内存中存活,也就是说,当你关闭浏览器后,Cookie就会消失.但是也可以通过方法设置cookie的生存时间. c ...

  4. vue3 第二天vue响应式原理以及ref和reactive区别

    前言: 前天我们学了 ref 和 reactive ,提到了响应式数据和 Proxy ,那我们今天就来了解一下,vue3 的响应式 在了解之前,先复习一下之前 vue2 的响应式原理 vue2 的响应 ...

  5. C++编程笔记(QT)

    目录 入门基础 模态对话框 消息提示框(messagebox) 文件和目录 字体选择框 输入对话框 进度条 工具栏 控件布局 Windows托盘案例 控件 button 下拉菜单按钮 `radioBu ...

  6. java面试题-线程

    简述线程.程序.进程的基本概念.以及他们之间关系是什么? 系统运行程序到停止就是一个进程创建到消亡的过程,而线程则是进程的更小单位 线程有哪些基本状态? 初始,运行中,等待,阻塞,超时,终止1 关注公 ...

  7. 【极客时间】大数据概述及HDFS介绍

  8. 【十次方微服务后台开发】Day02：加密与JWT鉴权、微服务注册中心、配置中心、熔断器、网关、消息总线、部署与持续集成、容器管理与监控Rancher、influxDB、grafana

    一.密码加密与微服务鉴权JWT 1.BCrypt密码加密 Spring Security 提供了BCryptPasswordEncoder类,实现Spring的PasswordEncoder接口使用B ...

  9. 网络编程 - OSI七层协议详解

    目录 网络编程基础 软件开发架构 网络编程简介 OSI七层协议简介 OSI协议之物理连接层 OSI协议之数据链路层 网络相关专业名词 OSI之网络层 OSI协议之传输层 传输层之TCP协议/UDP协议 ...

  10. frp内网穿透（已验证）

    # 云服务器frp内网穿透教程 软件源码在https://github.com/fatedier/frp/releases上,根据系统类型,按需下载 教程术语描述 > A 是有固定IP的云服务器 ...