在前后端数据交互的时候我们经常使用的是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. JS获当前网页元素高度offsetHeight

    本文测试的是offsetHeight,获取网页中某元素的高度,单位是像素,获取的类型是整型,可以进行数字运算.如图,网页中的元素本身的高度包括,自身的内容+padding+border,而margin ...

  2. 【git基础】Permission denied (publickey). fatal: Could not read from remote repository

    运行以下git命令的时候出现错误 git push -u origin master error The authenticity of host 'github.com (13.250.177.22 ...

  3. 【GStreamer开发】GStreamer基础教程09——收集媒体信息

    目标 有时你需要快速的了解一个文件(或URI)包含的媒体格式或者看看是否支持这种格式.当然你可以创建一个pipeline,设置运行,观察总线上的消息,但GStreamer提供了一个工具可以帮你做这些. ...

  4. SQL语言的分类（DQL、DML、DDL、DCL的概念与区别）

    SQL语言共分为四大类:数据查询语言DQL,数据操纵语言DML,数据定义语言DDL,数据控制语言DCL. 1. 数据查询语言DQL数据查询语言DQL基本结构是由SELECT子句,FROM子句,WHER ...

  5. Hive行列转换

    Hive行列转换   1.行转列 (根据主键,进行多行合并一列) 使用函数:concat_ws(‘,’,collect_set(column))  collect_list 不去重 collect_s ...

  6. pytorch1.0进行Optimizer 优化器对比

    pytorch1.0进行Optimizer 优化器对比 import torch import torch.utils.data as Data # Torch 中提供了一种帮助整理数据结构的工具, ...

  7. RabbitMQ基础命令rabbitmqctl

    官网文档 https://www.rabbitmq.com/rabbitmqctl.8.html 一般操作命令后台管理页面都有的,部分没有(应用程序管理,和集群管理). 直接使用命令,必须配置环境变量 ...

  8. Quartz.Net—初识

    什么是Quartz.Net 计划任务,定时框架.大到可以做灾难转移  负载均衡.小到可以做定时生成数据,数据更新等等. 官网 http://www.quartz-scheduler.org/    Q ...

  9. MySQL基础操作（二）

    MySQL基础操作 一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用.注意:使用视图时 ...

  10. python 的django项目复制方法

    python 的django项目复制方法 django_pyecharts_1修改为django_pyecharts_1_cs1.拷贝项目(确保原有项目是关闭状态下)2.粘贴项目并删除idea文件夹和 ...