通过WebSocket实现一个简单的聊天室功能
WebSocket
WebSocket是一个协议，它是是基于TCP的一种新的网络协议，TCP协议是一种持续性的协议，和HTTP不同的是，它可以在服务器端主动向客户端推送消息。通过这个协议，可以在建立一个nodejs的服务器，然后所有的客户端都可以向服务器端发送消息，然后服务器端把这个消息广播出去，形成了一个类似于聊天室的东西。
客户端：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>websoket</title>
</head>
<body>
<h1>chat room</h1>
<input type="text" id="msg" />
<button id="send">发送</button>
<script type="text/javascript">
var websocket = new WebSocket("ws://localhost:6666/"); function showMsg(str){
var div = document.createElement('div');
div.innerHTML = str;
document.body.appendChild(div)
} websocket.onopen=function(){
console.log("open");
document.getElementById('send').onclick = function() {
var txt = document.getElementById('msg').value;
if (txt) {
websocket.send(txt);
}
}
}
websocket.onclose = function() {
console.log("close");
}
websocket.onmessage = function(e) {
console.log(e.data);
showMsg(e.data);
}
</script>
</body>
</html>
从我的服务器localhost:6666实例化一个新的websocket，然后打开他监听发送按钮，点击发送就把txt发送到服务器端，然后监听得到的消息，通过showMsg渲染到界面上去
服务器端(node.js)：
var ws = require("nodejs-websocket")
var port = 6666;
var clientCount = 0;
var server = ws.createServer(function (conn) {
console.log("New connection")
clientCount++
conn.nickname = "user" + clientCount
broadcast("******* "+conn.nickname + " comes in *******");
conn.on("text", function (str) {
console.log("Received "+str)
broadcast(conn.nickname + " say: " + str)
})
conn.on("close", function (code, reason) {
broadcast("******* " + conn.nickname + " left *******");
})
conn.on("error", function(err) {
console.log("error: "+err);
})
}).listen(port)
console.log("websocket server listening on " + port);
function broadcast (str) {
server.connections.forEach(function (connection) {
connection.sendText(str)
})
}
之前要加载一下nodejs-websocket模块，来一个人就把计数器加1，然后给他设置名字，监听收到的消息text，有消息就执行broadcast，broadcast就是向所有的客户端广播新的消息
举个例子
这里是我服务器上的栗子，大家可以看看
http://www.xiedashuaige.cn/websocket.html
通过WebSocket实现一个简单的聊天室功能的更多相关文章
- 如何用WebSocket实现一个简单的聊天室以及单聊功能
百度百科中这样定义WebSocket:WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端.简单的说,We ...
- Netty学习笔记(四) 简单的聊天室功能之服务端开发
前面三个章节,我们使用了Netty实现了DISCARD丢弃服务和回复以及自定义编码解码,这篇博客,我们要用Netty实现简单的聊天室功能. Ps: 突然想起来大学里面有个课程实训,给予UDP还是TCP ...
- 基于websocket实现的一个简单的聊天室
本文是基于websocket写的一个简单的聊天室的例子,可以实现简单的群聊和私聊.是基于websocket的注解方式编写的.(有一个小的缺陷,如果用户名是中文,会乱码,不知如何处理,如有人知道,请告知 ...
- [SignalR]一个简单的聊天室
原文:[SignalR]一个简单的聊天室 1.说明 开发环境:Microsoft Visual Studio 2010 以及需要安装NuGet. 2.添加SignalR所需要的类库以及脚本文件: 3. ...
- 用ServletContext做一个简单的聊天室
这里主要是ServletContext的一个特性:ServletContext是一个公共的空间,可以被所有的客户访问.由此可见ServletContext比cookie和session的作用范围要大[ ...
- WebSocket介绍和一个简单的聊天室
WebSocket是什么呢? WebSocket一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并被RFC7936所补充规范, ...
- ASP.NET Signalr 2.0 实现一个简单的聊天室
学习了一下SignalR 2.0,http://www.asp.net/signalr 文章写的很详细,如果头疼英文,还可以机翻成中文,虽然不是很准确,大概还是容易看明白. 理论要结合实践,自己动手做 ...
- Netty学习笔记(六) 简单的聊天室功能之WebSocket客户端开发实例
在之前的Netty相关学习笔记中,学习了如何去实现聊天室的服务段,这里我们来实现聊天室的客户端,聊天室的客户端使用的是Html5和WebSocket实现,下面我们继续学习. 创建客户端 接着第五个笔记 ...
- node实现一个简单的聊天室（认识一下socket）
边学边理解node的高深,今天写了一个聊天室的demo,很简单,认识一下socket node服务端代码 var express = require('express'); var app = exp ...
随机推荐
- jmeter接口系列：时间戳、加密
JMeter安装配置 从官网下载JMeter的软件包apache-jmeter-x.x.zip,下载完成之后解压打开jmeter.bat即可. 说明 这里使用的jmeter版本是3.0,jdk版本是j ...
- 使用js做创建图片及删除图片 若有什么不对或不完整的地方，请大家提出来，谢谢
首先我们要在<body>中创建一个按钮<button>来用作点击创建图片,在<button>中写一个点击事件(随便命名), 在创建一个<div>存放图片 ...
- es6+require混合开发，兼容es6 module，import,export
近一年,一直很忙,做了不少的项目,不过都不是太满意,毕竟是别人的作品,不好意思写出来.最近打算开发一个es6的项目,项目中用到require,本文主要讲解es6的module规范怎么与require的 ...
- iOS_20_微博OAuth授权_取得用户授权的accessToken
终于效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400/fill ...
- this的指向问题
在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象. 例 1: var name = "windowsName"; function ...
- 原生js实现一个简单的倒计时功能
大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...
- 【转载】Spring AOP详解 、 JDK动态代理、CGLib动态代理
Spring AOP详解 . JDK动态代理.CGLib动态代理 原文地址:https://www.cnblogs.com/kukudelaomao/p/5897893.html AOP是Aspec ...
- CentOS 7下Samba服务器的安装与配置
文基于<CentOS 6.3下Samba服务器的安装与配置>,参照原博文,自己在CentOS7环境上实现,并按照自己的环境修改博文内容 一.简介 Samba是一个能让Linux系统应用Mi ...
- atom添加eslint插件
在atom编辑器里添加插件,操作步骤如下:以atom-ide-vue插件为例 //切换到插件目录cd /Users/name/.atom/packages //将需要下载插件的源代码拉下来git cl ...
- Linux chgrp
在学习 兄弟连 linux教学视频 的时候,我将所学的 linux 命令记录在我的博客中,方便自己查阅. 权限管理命令: chgrp 基础的命令 命令名称:chgrp 命令英文原意:change fi ...