在前后端数据交互的时候我们经常使用的是ajax，用的是传统的http协议，而http协议有个致命的缺点，就是请求一结束，连接就断开了， 我们为了保持这个链接的，通常会使用cookie，而自从h5出现websocket之后，妈妈再也不用担心我的请求了，可以愉快的玩耍了，websocket是TCP协议，也就是所谓的“长连接”，可以一直保持，客户端与服务端的连接，交互起来自然是so easy ,to happy,这两天利用工作之余，写了一个基于nodejs和websocket的聊天室，只为说明原理，没有做任何的样式，不喜勿喷

这是客户端：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<input type="text" id="input"/>

		<input type="button" value="发送" id="btn"/>

	</body>

	<script>

		var websocket = new WebSocket("ws://localhost:3000/");

		function showMessage(type,str){

			var div = document.createElement('div');

			div.innerHTML = str;

			if(type == 'enter'){

				div.style.color = 'blue';

			}else if(type == 'leave'){

				div.style.color = 'red';

			}

			document.body.appendChild(div);

		}

		websocket.onopen = function(){			//连接成功后的回调

			document.getElementById('btn').onclick = function(){

				var txt = document.getElementById('input').value;

				if(txt){

					websocket.send(txt);

				}

			}

		}

		websocket.onclose = function(){		//关闭连接的回调

		}

		websocket.onmessage = function(e){		//发送消息的回掉

			var msg = JSON.parse(e.data);

			showMessage(msg.type,msg.data);

		}

	</script>

</html>

　这是服务端：

var ws = require("nodejs-websocket")    //导入nodejs-websocket模块

var PORT = 3000;

var clientCount = 0;

// Scream server example: "hi" -> "HI!!!"

var server = ws.createServer(function (conn) {        //建立连接时

    console.log("New connection")

    clientCount++;

    conn.nickname = 'user'+clientCount;                //每一个用户名

    var msg = {};

    msg.type = "enter";        //消息的类型，

    msg.data = conn.nickname + '  进入了聊天室';

    msg = JSON.stringify(msg);    //数据格式化

    broadcast(msg);        //用于广播数据

    console.log(msg);

    conn.on("text", function (str) {

        console.log("Received "+str)

        var msg = {};

        msg.type = 'message';

        msg.data = conn.nickname + '：' + str;

        msg = JSON.stringify(msg);

        broadcast(msg);

    })

    conn.on("close", function (code, reason) {        //链接关闭的回调，注意这个一定要写，否则在关闭页面的时候，服务会抛异常；

        console.log("Connection closed")

        var msg = {};

        msg.type = 'leave';

        msg.data = conn.nickname +'离开了';

        msg = JSON.stringify(msg);

        broadcast(msg);

    })

    conn.on("error", function (err) {    //出错时候的回调；

        console.log(err);

    })

}).listen(PORT);

function broadcast(str){

    server.connections.forEach(function(connection){    //遍历所有的链接

        connection.sendText(str);                        //给每一个链接发送数据

    });

}

有说的不对的欢迎大家吐槽，大家相互学习。

websocket搭建的聊天室的更多相关文章

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

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

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

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

  3. 使用Html5下WebSocket搭建简易聊天室

    一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...

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

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

  5. SpringBoot 搭建简单聊天室

    SpringBoot 搭建简单聊天室(queue 点对点) 1.引用 SpringBoot 搭建 WebSocket 链接 https://www.cnblogs.com/yi1036943655/p ...

  6. SilverLight搭建WCF聊天室详细过程[转]

    http://www.silverlightchina.net/html/zhuantixilie/getstart/2011/0424/7148.html 默认节点 SilverLight搭建WCF ...

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

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

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

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

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

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

随机推荐

  1. 【转】行内元素和inline-block产生的水平空隙bug

    重构工程师们在设计代码时,有喜欢手动删除行内元素之间产生的额外空隙,并通过设置margin或padding来获取想要间距吗?如代码: <div class=“”><span clas ...

  2. U-Boot NFS RCE漏洞（CVE-2019-14192）

    U-Boot NFS RCE漏洞(CVE-2019-14192) 原文:https://blog.semmle.com/uboot-rce-nfs-vulnerability/ 翻译:看雪翻译小组 - ...

  3. web端自动化——Selenium3+python自动化（3.7版本）-火狐62版本环境搭建

    前言 目前selenium版本已经升级到3.0了,网上的大部分教程是基于2.0写的,所以在学习前先要弄清楚版本号,这点非常重要.本系列依然以selenium3为基础. 一.selenium简介 Sel ...

  4. iOS-打印控件

    20.UIPrintFormatterUIPrintFormatter时打印格式化的抽象基类:展示了传统的可打印的内容对象可以跨页边界.由于打印格式化,打印系统,可以自动打印与打印格式化的内容相关联的 ...

  5. 获取本机IP地址[JavaScript / Node.js]

    --web客户端JavaScript <body onload="checkCookie()"></body> function getYourIP(){ ...

  6. unix 命令

    ubuntu  命令窗口的打开 打开命令行窗口: Ctrl+Alt+T 在打开的命令行窗口中打开一个新的Tab: Ctrl+Shift+T 在同一窗口的Tab间切换: Ctrl+Page Up 或者 ...

  7. 按键板的原理与实现----ADC

    在嵌入式系统产品开发中,按键板的设计是最基本的,也是项目评估阶段必须要考虑的问题.其实现方式又很多种,具体使用那一种就需要结合特定IC的可用IO数量,并综合考虑成本,做出最终选择.本系列文章将介绍多种 ...

  8. php面相对象基本概念，基本形式，传值

    面向对象基本概念 面向对象三大特性:封装  继承  多态 类与对象 类:是用于描述“某一些具有共同特征”的物体的概念,是某一类物体的总称. 通常,一个类所具有的共同特征包括2大方面的信息: 外观,形状 ...

  9. Nginx07---反向代理

    小程序使用nginx反向代理https和wss user www www; worker_processes auto; error_log /www/wwwlogs/nginx_error.log ...

  10. 作业练习P194，jieba应用，读取，分词，存储，生成词云，排序，保存

    import jieba #第一题 txt='Python是最有意思的编程语言' words=jieba.lcut(txt) #精确分词 words_all=jieba.lcut(txt,cut_al ...