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 ...
随机推荐
- centos7证书安全登录
生成一对密钥,本地私钥匹配线上主机的公钥进行登录,比密码登录更加安全方便. 本文适用MAC/Linux的本地环境 1.本地生成一对密钥 ssh-keygen -t rsa 2.把生成的公钥上传到线上主 ...
- 【Boost】boost::string_algo详解2——find相关函数
来自: https://blog.csdn.net/huang_xw/article/details/8276123 函数声明: template<typename Range1T, typ ...
- Delphi及C++Builder经典图书一览表（持续更新中2018.01.02）
序号 书名 原版书名 作者 译者 出版社 页数 年代 定价 备注 1 C++Builder 5程序设计大全 C++Builder 5 Developer's Guide Jarrod Hollingw ...
- Hierarchical softmax(分层softmax)简单描述.
最近在做分布式模型实现时,使用到了这个函数. 可以说非常体验非常的好. 速度非常快,效果和softmax差不多. 我们知道softmax在求解的时候,它的时间复杂度和我们的词表总量V一样O(V),是性 ...
- markdown列表中的缩进
使用markdown时,一向不敢使用多级列表,因为多级列表容易出错.而实际上,只需要缩进两个空格就可以实现嵌套了. * one 这个是one的内容 * two 这个是two的内容 * three * ...
- weak_ptr<T>智能指针
weak_ptr是为配合shared_ptr而引入的一种智能指针,它更像是shared_ptr的一个助手,而不是智能指针,因为它不具有普通指针的行为,没有重载operator*和operator-&g ...
- Effective Java 第三版——77. 不要忽略异常
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- Django-ORM 复习
老师博客 https://www.cnblogs.com/yuanchenqi/articles/6083427.html day51 表与表之间的关系 一对一 一对多(多对一) 多对多 A表依赖B表 ...
- 关于java多线程中异常捕获的理解
在java多线程程序中,所有线程都不允许抛出未捕获的checked exception(比如sleep时的InterruptedException),也就是说各个线程需要自己把自己的checked e ...
- 移动开发常用meta设置
<!-- 视图窗口,移动端特属的标签. --> <meta name="viewport" content="width=device-width,in ...