1.建立新的文件夹dome

2.执行 npm init加载package.json文件

3.node不支持websocket所以npm install  ws 下载 ws插件

4.建立index.html文件代码如下

<!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://localhost:8090/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("连接没有开启.");
　　　　}
　　}
</script>
<form onsubmit="return false;">
　　<h3>WebSocket 聊天室：</h3>
　　<textarea id="responseText" style="width: 500px; height: 300px;"></textarea>
　　<br />
　　<input type="text" name="message" style="width: 300px" value="Welcome to waylau.com" />
      <input type="button" value="发送消息" onclick="send(this.form.message.value)" />
　　<input type="button" onclick="javascript:document.getElementById('responseText').value=''" value="清空聊天记录" />
</form>
</body>
</html>
 
5.建立index.js文件代码如下
 
const WebSocket = require("ws");
const server = new WebSocket.Server({ port: 8090 });
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);
　　}
});
});
});
 
6.启动代码  node index.js
 
7.在浏览器打开index.html 就可以查看了
 

websocket+node建立聊天室简单使用的更多相关文章

  1. 基于Node.js + WebSocket 的简易聊天室

    代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...

  2. Java和WebSocket开发网页聊天室

    小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项 ...

  3. 分享基于 websocket 网页端聊天室

    博客地址:https://ainyi.com/67 有一个月没有写博客了,也是因为年前需求多.回家过春节的原因,现在返回北京的第二天,想想,应该也要分享技术专题的博客了!! 主题 基于 websock ...

  4. workerman-chat（PHP开发的基于Websocket协议的聊天室框架）（thinkphp也是支持socket聊天的）

    workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...

  5. 关于node的聊天室错误

    Deprecationwarning:process,EventEmitter is deprecated use require ('events')instead 关于node的聊天室错误 > ...

  6. node.js+websocket实现简易聊天室

    (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) websocket提供了一种全双工客户端服务器的异步通信方法,这种通信方法使用ws或者wss协议,可 ...

  7. node+websocket创建简易聊天室

    关于websocket的介绍太多,在这就不一一介绍了,本文主要实现通过websocket创建一个简易聊天室,就是90年代那种聊天室 服务端 1.安装ws模块,uuid模块,ws是websocket模块 ...

  8. php+websocket搭建简易聊天室实践

    1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...

  9. nodejs+mongoose+websocket搭建xxx聊天室

    简介 本文是由nodejs+mongoose+websocket打造的一个即时聊天系统:本来打算开发一个类似于网页QQ类似功能的聊天系统,但是目前只是开发了一个模块功能 --- 类似群聊的,即一对多的 ...

随机推荐

  1. 服务端性能测试工具校验v1.2

    服务端性能测试工具校验v1.2 想知道压力工具实际并发多少,想知道压力工具统计响应数据准不准,来试试这款校准工具. 更新说明: 1.修正总接收请求显示上限. 2.随着响应时间增加,自动增加处理线程. ...

  2. Session注销后，浏览器后退仍显示Session信息

    初学JavaWeb,在一次测试登录功能的时候,发现了登进去后,点击退出按钮注销session,浏览器按后退能够显示session信息,并且点击登录还能够不输入密码登录(前端页面没写JS限制输入后登录) ...

  3. SSM使用AbstractRoutingDataSource后究竟如何解决跨库事务

    Setting: 绑定三个数据源(XA规范),将三个实例绑定到AbStractoutingDataSource的实例MultiDataSource(自定义的)对象中,mybatis  SqlSessi ...

  4. 剑指offer-拓展训练-N皇后的问题-全排列

    /* 题目: N皇后的问题. */ /* 思路: 全排列. 声明一个具有N个元素的数组curr,每个下标i(0>i>n)代表行,每个curr[i]代表列,所以初始化为curr[i] = i ...

  5. opencv —— erode、dilate 腐蚀与膨胀

    腐蚀与膨胀是形态学滤波.其中,腐蚀是最小值滤波,膨胀是最大值滤波,即分别选取内核中的最小值与最大值赋值给锚点.若内核为 N×1 或 1×N 形状,可用于横纵方向直线检测. 膨胀:dilate 函数 v ...

  6. js监听滚动结束

    使用setTimeout模拟滚动结束 let scrollTimer; document.addEventListener("scroll", () => { clearTi ...

  7. 【剑指Offer】62、序列化二叉树

    题目描述 请实现两个函数,分别用来序列化和反序列化二叉树 二叉树的序列化是指:把一棵二叉树按照某种遍历方式的结果以某种格式保存为字符串,从而使得内存中建立起来的二叉树可以持久保存.序列化可以基于先序. ...

  8. 服务器CentOS7上安装MySql

    1.确保服务器系统处于最新状态 [root@localhost ~]# yum -y update如果显示以下内容说明已经更新完成Replaced:grub2.x86_64 1:2.02-0.64.e ...

  9. 【sklearn文本特征提取】词袋模型/稀疏表示/停用词/TF-IDF模型

    1. 词袋模型 (Bag of Words, BOW) 文本分析是机器学习算法的一个主要应用领域.然而,原始数据的这些符号序列不能直接提供给算法进行训练,因为大多数算法期望的是固定大小的数字特征向量, ...

  10. 一键安装最新内核并开启 BBR 脚本

    最近,Google 开源了其 TCP BBR 拥塞控制算法,并提交到了 Linux 内核,从 4.9 开始,Linux 内核已经用上了该算法.根据以往的传统,Google 总是先在自家的生产环境上线运 ...