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. Node中使用MongoDB

    简介 MongoDB 中文文档 MongoDB是一个介于关系数据库和非关系数据库(nosql)之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的. Mongoose 在Node中可以使用 Mo ...

  2. springboot容器加载完毕执行某一个方法

    问题: 最近做项目(项目使用的是springboot)的时候,数据库有一个配置参数表,每次都要查询数据库去做数据转换,这样每次查询数据库感觉不太友好,后来写了一个方法项目启动完成后立即执行此方法,将配 ...

  3. 0.96寸OLED显示屏驱动手册（SSD1306）

    MCU IIC接口 IIC通信接口由从地址位SA0,IIC总线数据信号SDA(输出SDAout/D2和输入SDAin /D1)和IIC总线时钟信号SCL(D0).不管是数据线还是时钟线都需要连接上拉电 ...

  4. .net core 3.0+unit of work （一）

    1.先将unit of work源码下载 2.引入自己的项目 3.根据原始项目示意在自己项目的startup里注册仓储 由于我不想对每个实体都注册一遍,我使用了泛型仓储(core 2.0好像不支持) ...

  5. yii 日志和事件

    日志 配置 'log' => [ 'traceLevel' => YII_DEBUG ? 3 : 0, 'targets' => [ [ 'class' => 'yii\log ...

  6. 6-Z字形变换

    6-Z字形变换 将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" 行数为 3 时,排列如下: L C ...

  7. Apache Solr Velocity模板注入rce+获取交互式shell

    前言: 官方的poc.exp payload只能获取很低的命令执行权限,甚至有些符号.命令还被过滤了,例如管道符被过滤.并且不能写入.下载文件,不能使用管道符重定向文件.那么我们只能通过获取到交互式s ...

  8. ubuntu---CUDA版本与NVIDIA显卡驱动版本对应关系查询

    https://docs.nvidia.com/cuda/cuda-toolkit-release-notes/index.html ,如果不是CUDA 10.2 版本的,可以类似的查找 CUDA x ...

  9. Mybatis的增删改和log4j的基础配置

    带条件查询 mapper文件的内容: <select id="getSelectElectron" resultType="electron"> s ...

  10. vim编辑器未正常关闭时解决方案

    目录 vim编辑器未正常关闭时解决方案 问题描述 .swp..swo文件产生原因 解决方案 后记 hosts文件 sudo命令小记 vim编辑器未正常关闭时解决方案 问题描述 在mac上的/etc目录 ...