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. 没有正确配置扫描包，提示spring的bean不存在

    如下提示的解决方案: <!-- 扫描org.infor包下面的java文件,有Spring的相关注解的类,则把这些类注册为Spring的bean -->  <context:comp ...

  2. linux cpp (接口与实现的分离)

    以下是 .h 文件,是接口. 以下是函数的实现 以下是主函数 首先是以上两个文件编译,不用编译头文件 g++ -c gradeBook.cpp g++ -c gradeBook.main.cpp 之后 ...

  3. windows服务踩的坑

    最近写了一个windows服务 有一些bug最后终于解决了还是写点经验把. 第一点.版本问题,因为是小白,第一次写windows服务,选择的是.net4.6.1的目标框架,因为我的电脑是windows ...

  4. tomcat虚拟路径的配置方法

    方式一: 将web项目配置到webapps以外的目录 在conf/server.xml中配置,找到<host>标签,<Content docBase="E:\yqs\Jsp ...

  5. JavaScript的语法、数据类型、基本算数和逻辑运算操作

    str.toString() 可以把字符串.数值.布尔值.对象转为字符串 String(str) 任何数值强制转换为字符串类型 <!DOCTYPE html> <html lang= ...

  6. js增删class的方法

    接下来我来介绍两种方法 我们先来一段HTMl代码 <div id="bb"> 你好呀 </div> 接下来我们再来一段css样式 .ob { color:r ...

  7. 剑指offer-面试题38-字符串的排列-全排列

    /* 题目: 输入字符串,打印字符串的所有排列. 输入acc,输出[acc, cac, cca]. */ /* 思路: 将字符串看作两部分,第一个字符串和后面的部分. 将第一个字符串与后面字符串依次交 ...

  8. Spring MVC 定时任务注解说明

    一.注解说明. Spring 自带的定时任务执行@Scheduled注解,可以定时的.周期性的执行一些任务.查看@Scheduled的注解可以看到有以下三种: 1.1 String cron() de ...

  9. 当课堂因监控技术变“囚笼”，存在争议的AI使用场景该被抵制吗？

    当马云和马斯克高谈阔论AI是否会影响人类社会时,尚无"感情"的AI已在校园中"作恶".近日,一张AI监控课堂的GIF在网上迅速刷屏.这张GIF中记录了课堂中所有 ...

  10. Spark学习之路 （八）SparkCore的调优之开发调优[转]

    前言 在大数据计算领域,Spark已经成为了越来越流行.越来越受欢迎的计算平台之一.Spark的功能涵盖了大数据领域的离线批处理.SQL类处理.流式/实时计算.机器学习.图计算等各种不同类型的计算操作 ...