9、socket.io,websocket 前后端实时通信,(聊天室的实现)
websocket 一种通信协议
ajax/jsonp 单工通信
websocket 全双工通信 性能高 速度快
2种方式：
1、前端的websocket
2、后端的 socket.io
一、后端socket.io
cnpm i socket.io
接收on 发送emit ——可以发送任意类型的数据
后端：
1、创建httpServer
2、创建wsServer var ws = io(httpServer);
3、连接
ws.on("connect",function(socket){
//45 发送或者接收
发送 socket.emit("名称"，数据);
广播 socket.broadcast.emit("名称"，数据);
接收 socket.on(名称，function(data——数据){
});
});
前端：
1、引入js src="/socket.io/socket.io.js"
2、连接
var ws = io("ws://ip:port");
3、发送接收 on/emit
聊天室：
chat.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0;margin:0;list-style:none;}
#div1{ position:relative;width:500px; height:400px; border:1px solid red;}
#text{ position:absolute;left:0;bottom:0;width:80%; height:100px;}
#btn1{ position:absolute;right:0;bottom:0;width:20%; height:100px;}
#ul1{width:100%; height:300px; background:#ccc; overflow-y:auto;}
#ul1 li{ line-height:30px; border-bottom:1px dashed red;}
</style>
<!--<script src="/socket.io/socket.io.js"></script>-->
<script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script>
<script>//http://10.30.155.92
//var ws = io("ws://10.30.155.92:9000");
//var ws = io("http://10.30.155.92:9000");
//var ws = io();
var ws = io.connect("ws://10.30.155.92:9000");//标准写法 ws://
window.onload = function(){
var oUl = document.getElementById("ul1");
var oText = document.getElementById("text");
var oBtn = document.getElementById("btn1");
var name = prompt("请输入你的用户名")//"张三";
oBtn.onclick = function(){
//发送数据
var data = {name:name,value:oText.value};
ws.emit("msg",data);
createLi(data);
};
//接收数据 1创建dom
ws.on("msg_all",function(data){
console.log(data);
createLi(data);
});
function createLi(data){
//创建dom
var oLi = document.createElement("li");
oLi.innerHTML = `<strong>${data.name}</strong> <span>${data.value}</span>` ;
oUl.appendChild(oLi);
oUl.scrollTop = oUl.scrollHeight;
}
};
</script>
</head>
<body>
<div id="div1">
<ul id="ul1">
<!--<li><strong>张三</strong> <span>聊天内容</span></li>-->
</ul>
<textarea id="text"></textarea>
<input id="btn1" type="button" value="发送"/>
</div>
</body>
</html>
chat.js
var http = require("http");
var io = require("socket.io");
var fs = require("fs");
//创建http服务
var httpServer = http.createServer(function(req,res){
var url = req.url;
fs.readFile("www"+url,function(err,data){
if(err){
res.end("404");
} else {
res.end(data);
}
});
});
httpServer.listen(9000);
//创建websockt服务
var ws = io(httpServer);
ws.on("connection",function(socket){
console.log("wsServer");
//接收数据
socket.on("msg",function(data){
console.log(data);
//发送数据广播
socket.broadcast.emit("msg_all",data);
});
});
前端H5 WebSocket
ws: http
wss:https
前端配置:
var ws = new WebSocket("ws://ip:port");
ws.onopen = function(evt) {
console.log("Connection open ...");
ws.send("Hello WebSockets!");
};
ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
ws.close();
};
ws.onclose = function(evt) {
console.log("Connection closed.");
};
后端：npm i ws
npm i ws
https://www.npmjs.com/package/ws
var wss = new WebSocket({server:httpServer});
wss.on("connection",function(ws,req){
发送 接收
接收
ws.onmessage(function(ev){
//数据 ev.data
});
发送：
ws.send(数据);
数据 最好只能是字符串！！！
});
exp:
h5.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
var ws = new WebSocket("ws://localhost:9000");
//建立连接
ws.onopen = function(ev) {
console.log("连接成功");
};
//接收数据
ws.onmessage = function(ev) {
console.log( "接收数据",ev.data);//server--->client
//发送数据
//ws.send("client--->server");
try{
//只处理json
var json = JSON.parse(ev.data);
console.log(json);
if(json.type == "click"){
var oSpan = document.getElementById("s1");
oSpan.innerHTML = json.value;
}
}catch(e){
}
};
//连接关闭
ws.onclose = function(evt) {
console.log("连接关闭");
};
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
//发送数据 只能发送字符串
ws.send(JSON.stringify({type:"click",value:"abc"}));
};
}
</script>
</head>
<body>
h5 WebSocket
<input id="btn1" type="button" value="发送"/><span id="s1">1111</span>
</body>
</html>
h5.js:
var http = require("http");
var WebSocket = require("ws");
var fs = require("fs");
//创建http服务
var httpServer = http.createServer(function(req,res){
var url = req.url;
fs.readFile("www"+url,function(err,data){
if(err){
res.end("404");
} else {
res.end(data);
}
});
});
httpServer.listen(9000);
//创建websockt服务
var wss = new WebSocket.Server({ server:httpServer });
wss.on('connection', function connection(ws) {
console.log("wsServer");
//发送 send
ws.send("server--->client");
//接收
ws.on('message', function(message) {
console.log(message);
//ws.send(message);
//广播
wss.clients.forEach(function(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
爱我所爱无怨无悔
9、socket.io,websocket 前后端实时通信,(聊天室的实现)的更多相关文章
- WebSocket 时时双向数据，前后端（聊天室）
https://blog.csdn.net/lecepin/article/details/54632749 实例内容 今天主要说一下微信的WebSocket接口以及在小程序中的使用. WebSock ...
- 使用node.js + socket.io + redis实现基本的聊天室场景
在这篇文章Redis数据库及其基本操作中介绍了Redis及redis-cli的基本操作. 其中的publish-subscribe机制应用比较广泛, 那么接下来使用nodejs来实现该机制. 本文是对 ...
- 使用socket.io实现多房间通信聊天室
websocket的实现有很多种,像ws和socket.io,这里使用的是socket.io来实现多房间的效果. 这里的使用没有使用socket.io官方提供的namespace和room,而是完全通 ...
- vue.js+socket.io+express+mongodb打造在线聊天
vue.js+socket.io+express+mongodb打造在线聊天 在线地址观看 http://www.chenleiming.com github地址 https://github.com ...
- vue.js+socket.io+express+mongodb打造在线聊天[二]
vue.js+socket.io+express+mongodb打造在线聊天[二] 在线地址观看 http://www.chenleiming.com github地址 https://github. ...
- HTML5新特性 websocket(重点)--多对多聊天室
一.html5新特性 websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...
- java 用socket制作一个简易多人聊天室
代码: 服务器端Server import java.io.*; import java.net.*; import java.util.ArrayList; public class Server{ ...
- 与众不同 windows phone (31) - Communication（通信）之基于 Socket UDP 开发一个多人聊天室
原文:与众不同 windows phone (31) - Communication(通信)之基于 Socket UDP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...
- 与众不同 windows phone (30) - Communication（通信）之基于 Socket TCP 开发一个多人聊天室
原文:与众不同 windows phone (30) - Communication(通信)之基于 Socket TCP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...
随机推荐
- RobotFrameWork接口项目分层及通用控制方式
1. 前言 上一篇文章介绍了在设计接口用例之前应遵守的设计规范,详见<RobotFramework接口设计规范>,当然读者公司的内部规范也不一定非得完全遵循笔者所提到的,适合自己公司内部的 ...
- 解决：Reading table information for completion of table and column names
mysql -A不预读数据库信息(use dbname 更快)—Reading table information for completion of table and column names Y ...
- mac ssh 连接超时
打开终端,进入,/etc/ssh.sudo vi ssh_config 最后一行添加 ServerAliveInterval30 然后保存就可以了
- JAVA中Integer的==和equals注意
“equals”比较:equals(Object obj)方法,在equals(Object obj)方法中,会先判断参数中的对象obj是否是Integer类型的对象,如果是则判断值是否相同,值相同则 ...
- [k8s]k8s的控制层kubelet+docker配合调度机制(k8架构)
意外停掉一台node的kubelet,发现调度有问题,研究了下调度的细节 k8s架构 控制层- kubelet(配合节点docker工作) 数据层- kube-proxy 逻辑图: object 参考 ...
- [HDFS Manual] CH4 HDFS High Availability Using the Quorum Journal Manager
HDFS High Availability Using the Quorum Journal Manager HDFS High Availability Using the Quorum Jour ...
- 网页调启用qq对话聊天客服窗口的链接地址方法大全（包含移动端）
z转自: http://www.wazhuti.com/1781.html 在PC端,腾讯的QQ软件还是应用最为广泛的即时通讯工具了,除了网站自动的一些对话软件外,qq可以有效的将用户留存下来, ...
- Java编程的逻辑 (93) - 函数式数据处理 (下)
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...
- 【python】——python3 与 python2 的那些不兼容
python2 python3 string.uppercase string.ascii_uppercase string.lowercase string.ascii_lowercase xran ...
- ASCII码与unicode字符集
问题1:为什么需要字符ASCII码.unicode码等等???它们到底有什么作用? 首先要明白一个事实:在计算机中只能用一系列存储着的0和1,当我们把一个字符存放在计算机时,我们是如何表示常用的字符呢 ...