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

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. SQL--Case When.. Then.. end的使用

    Case  When.. Then.. end的使用场景 当字段有不同的值,根据不同的值表示不同的内容 use [数据库名] go if exists( select * from sys.views ...

  2. 三十四、kubernetes证书介绍

    Kubernetes 证书介绍 一.证书机制说明 Kubernetes 作为一个分布式集群的管理工具,保证集群的安全性是其一个重要的任务.API Server 是集群内部各个组件通信的中介,也是外部控 ...

  3. 转载：Python 实现百度翻译

    来源: https://blog.csdn.net/qq_44814439/article/details/105642066 作者: Chloemxc 功能: Python 实现百度翻译 from ...

  4. Nginx四层负载均衡1

    1.Nginx负载均衡Redis 服务器 IP地址 作用 系统版本 Nginx代理服务器 10.0.0.38 负载均衡服务器 Rocky8.6 Redis服务器1 10.0.0.18 Redis服务器 ...

  5. 【JVM】关于JVM，你需要掌握这些 | 一文彻底吃透JVM系列

    写在前面 最近,一直有小伙伴让我整理下关于JVM的知识,经过十几天的收集与整理,初版算是整理出来了.希望对大家有所帮助. JDK 是什么? JDK 是用于支持 Java 程序开发的最小环境. Java ...

  6. 解决“fast-forward, aborting”问题

    1. 现象 对某一个远程仓库 git pull 过程中,报错如下: # zl @ srv123 in ~/git/radxa/kernel [14:09:54] $ git pull remote: ...

  7. Dubbo-聊聊Dubbo协议

    前言 Dubbo源码阅读分享系列文章,欢迎大家关注点赞 SPI实现部分 Dubbo-SPI机制 Dubbo-Adaptive实现原理 Dubbo-Activate实现原理 Dubbo SPI-Wrap ...

  8. 30位以内随机产生时间戳加随机数id

    package com.zx.ps.web.gzdb; import java.text.SimpleDateFormat; import java.util.Date; public class c ...

  9. MySQL进阶实战4，MySQL索引详解，下篇

    一.索引 索引是存储引擎用于快速查找记录的一种数据结构.我觉得数据库中最重要的知识点,就是索引. 存储引擎以不同的方式使用B-Tree索引,性能也各有不同,各有优劣.例如MyISAM使用前缀压缩技术使 ...

  10. Zabbix技术分享——使用docker-compose快速部署zabbix监控系统

    前面文章有提到过使用docker来快速拉起一个zabbix监控系统(详见:如何使用docker快速部署一个zabbix监控系统),但是要一个个执行docker启动命令去将对应的容器启动.如果要配置参数 ...