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

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. 如何检查“lateinit”变量是否已初始化？

    kotlin中经常会使用延迟初始化,如果要校验lateinit var 变量是否初始化.可以使用属性引用上的.isInitialized. 原文中是这样描述的:To check whether a l ...

  2. JAVA学习前准备

    电脑常用快捷键 Ctrl+C:复制 Ctrl+V:粘贴 Ctrl+A:全选 Ctrl+X:剪切 Ctrl+Z:撤销 Ctrl+S:保存 Alt+F4:关闭窗口 Shift+delete:永久性删除文件 ...

  3. Java Stream流的使用

    流相关的方法可以分为三种类型,分别是:获取Stream流.中间方法.终结方法.中间方法会返回当前流,可以方便的进行链式调用. 流不可重复使用,否则会报错: java.lang.IllegalState ...

  4. JVM调优工具使用手册

    ​ 作为Java开发人员,我们肯定知道JDK的bin目录下有"java.exe"."javac.exe"这两个命令工具,这也是我们平时用得最多的工具.但其实bi ...

  5. 2022春每日一题：Day 7

    题目:Fire 先预处理出每个F蔓延的时间,再bfs走迷宫. 代码: #include <cstdio> #include <cstdlib> #include <cst ...

  6. 少走点弯路：Wiki.js 通过 Generic OAuth2 进行身份验证

    Wiki.js介绍 Wiki.js 是一个开源的百科全书系统,可以用来搭建自己的知识库.文档库等. 官网 | GitHub 后续内容中的Wiki.js会用Wiki代替. 本文环境:Wiki 2.5.2 ...

  7. Go语言核心36讲25

    你好,我是郝林,今天我分享的主题是:测试的基本规则和流程(上). 你很棒,已经学完了本专栏最大的一个模块!这涉及了Go语言的所有内建数据类型,以及非常有特色的那些流程和语句. 你已经完全可以去独立编写 ...

  8. ubuntu上升级cmake到3.16版本

    本来cmake的旧版本是2.8.12.2,现在更新到3.16.0版本. 需要文件:cmake 3.16.0压缩包,在附件. 1.  查看cmake版本:cmake --version 2.  解压cm ...

  9. C++期末考试题库

    哈尔滨商业大学计算机专业C++期末考试题库 下载:题库 示例: 一.单选题:1.能作为 C ++程序的基本单位是( C )A .字符 B .语句 C .函数 D .源程序文件2.程序中主函数的名字为( ...

  10. 【数据库】Postgresql/PG-编写函数实现字段对应加备注

    〇.资料链接 一.背景 构建分区表时,删除了表的字段备注信息 1.查询语句 select c.relname 表名, cast ( obj_description (relfilenode, 'pg_ ...