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. window10 cmd 常见命令

    AT 计划在计算机上运行的命令和程序. ATTRIB 显示或更改文件属性. BREAK 设置或清除扩展式 CTRL+C 检查. CACLS 显示或修改文件的访问控制列表(ACLs). CALL 从另一 ...

  2. fatal: HttpRequestException encountered

    报错:fatal: HttpRequestException encountered 解决方法 Github 禁用了TLS v1.0 and v1.1,必须更新Windows的git凭证管理器,才行. ...

  3. P1832题解 A+B Problem（再升级）

    万能的打表 既然说到素数,必须先打素数表筛出素数, 每个素数可以无限取,这就是完全背包了. 这次打个质数表: bool b[1001]={1,1,0,0,1,0,1,0,1,1,1,0,1,0,1,1 ...

  4. html无卡顿动画实现——requestAnimationFrame

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. mssql格式化工具——SQL PRETTY PRINTER

    1.mssql版本 mssql格式化工具有4个版本 1.桌面版 2.mssql插件 3.vs插件 4.api 2.下载地址 下载地址:http://www.dpriver.com/dlaction.p ...

  6. How Many Tables HDU - 1213

    #include<iostream> using namespace std; ; int p[N]; int find(int x) { if(p[x]!=x) p[x]=find(p[ ...

  7. 推荐7款用于PHP的代码调试工具，太有用了！

    当谈论到服务器端的脚本语言时,大多数人都会首先想到PHP.在你写完代码后,使用一些检查方面的工具是非常有必要的,无论是单纯的代码调试工具,还是测试优化工具.下面就为广大的PHP开发者介绍7个专为PHP ...

  8. mysql执行顺序及左连接和右连接

    SELECT语句执行顺序 SELECT语句中子句的执行顺序与SELECT语句中子句的输入顺序是不一样的,所以并不是从SELECT子句开始执行的,而是按照下面的顺序执行: 开始->FROM子句-& ...

  9. Linux命令——细节

    echo -n 不换行输出 echo -e 处理特殊字符 若字符串中出现以下字符,则特别加以处理,而不会将它当成一般文字输出: \a 发出警告声: \b 删除前一个字符: \c 最后不加上换行符号:  ...

  10. 聊聊c#字符串拼接

    字符串对我编程人员来说是字符串时每天见面的常客,你不认识不熟悉他都不得行,字符串的拼接更是家常便饭,那么在实际开发过程中实现字符串的拼接有哪一些方式呢?咱们一起来聊聊,来交流沟通,学习一波.也许你会说 ...