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. beego框架之orm模块——mysql

    参考beego原文:http://beego.me/docs/mvc/model/orm.md#main.go beego ORM 是一个强大的 Go 语言 ORM 框架,orm模块主要是处理MVC中 ...

  2. P4197 Peaks [克鲁斯卡尔重构树 + 主席树][克鲁斯卡尔重构树学习笔记]

    Problem 在\(Bytemountains\)有\(n\)座山峰,每座山峰有他的高度\(h_i\) .有些山峰之间有双向道路相连,共\(M\)条路径,每条路径有一个困难值,这个值越大表示越难走, ...

  3. 在服务器上安装并配置JDK1.8

    参考链接:https://blog.csdn.net/qq_40958000/article/details/83996912

  4. B-S 期权定价模型

    Black-Scholes 期权定价模型概述 1997年10月10日,第二十九届诺贝尔经济学奖授予了两位美国学者,哈佛商学院教授罗伯特·默顿(RoBert Merton)和斯坦福大学教授迈伦·斯克尔斯 ...

  5. 阿里面试Java程序员都问些什么？

    刚开始也是小白,也是一步步成成起来的.需要提的一点是,你将来是需要靠这个吃饭的,所以请对找工作保持十二分的热情,而且越早准备越好. 阿里一面 一面是在上午9点多接到支付宝的面试电话的,因为很期望能够尽 ...

  6. AGC001 E - BBQ Hard [组合数]

    这题就是要求 \(\sum_{i=1}^{n} \sum_{j=i+1}^{n} C(a_i+a_j+b_i+b_j,a_i+a_j)\) 考虑搞一搞,\(C(a_i+a_j+b_i+b_j,a_i+ ...

  7. P3292 [SCOI2016]幸运数字 [线性基+倍增]

    线性基+倍增 // by Isaunoya #include <bits/stdc++.h> using namespace std; #define rep(i, x, y) for ( ...

  8. 51Nod 1183 编辑距离 （字符串相似算法）

    编辑距离,又称Levenshtein距离(也叫做Edit Distance),是指两个字串之间,由一个转成另一个所需的最少编辑操作次数.许可的编辑操作包括将一个字符替换成另一个字符,插入一个字符,删除 ...

  9. 双 leave 栈迁移的坑

    目录 简介 问题 解决办法 简介   之前在复现自己做出来的题时,一样的思路发现拿不了 shell 了,后来发现是栈迁移的坑. 问题   假设 32 位系统中,漏洞函数可以任意写入 0x0000000 ...

  10. BZOJ5137&&lg4081(广义后缀自动机，set启发式合并)

    BZOJ5137&&lg4081(广义后缀自动机,set启发式合并) 题面 自己找去 HINT 给定多个文本串,让你查询每个文本串中有多少个本质不同的子串且这个子串只出现在当前这个文本 ...