在前后端数据交互的时候我们经常使用的是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. 【kubeconfig】kubectl命令所使用的集群访问文件

    kubectl默认会从$HOME/.kube目录下查找文件名为 config 的文件,也可以通过设置环境变量 KUBECONFIG 或者通过设置 --kubeconfig 去指定其它 kubeconf ...

  2. windows xp能连上网但是不能上网的解决办法

    说明:我是使用这个办法解决了,并不能针对所有的情况. 具体情况是,在win xp下,能够看到当前的无线网络,并且也能够连接到无线网络. 但是连接上无线网络之后,他的ip地址和网关是没有改变的.所以也连 ...

  3. SQL Server判断对象是否存在

    1 判断数据库是否存在 if exists (select * from sys.databases where name = ’数据库名’) drop database [数据库名] if exis ...

  4. 【tensorflow】tensorflow官网进不去，因为它的地址改变了

    以前的网址是https://www.tensorflow.org/,当时得fq才能打开,现在这个我fq都打不开了. 现在新网址是https://tensorflow.google.cn/这个不fq都可 ...

  5. 【Leetcode_easy】1051. Height Checker

    problem 1051. Height Checker solution class Solution { public: int heightChecker(vector<int>&a ...

  6. 关于STM32F405的GPIO中断问题

    1. 下面的图,应该是多个引脚中断挂在同一个中断号上面,也就是PA0和PB0同时挂在一个中断源上面,那么就是说只能同时使用其中一个 寄存器的配置,确实只能有一个使用

  7. redis 部署

    wget http://download.redis.io/releases/redis-4.0.14.tar.gz tar -zxvf redis-4.0.14.tar.gz mv redis-4. ...

  8. React项目使用Redux

    ⒈创建React项目 初始化一个React项目(TypeScript环境) ⒉React集成React-Router React项目使用React-Router ⒊React集成Redux Redux ...

  9. Zuul【自定义Filter】

    实际业务中,如果要自定义filter过滤器,只需集成ZuulFIlter类即可,该类是个抽象类,它实现了IZuulFIlter接口,我们需要实现几个方法,如下示例: import static org ...

  10. Java字符串定义及常用方法

    String.StringBuffer和StringBuilder   String修饰的是不可变的字符串,而StringBuffer和StringBuilder类的对象是可以被修改的.   Stri ...