初识 socket.io 模块
日期: 2017-09-27 浏览量: 2864
今天分享下,socket.io 模块,做一个简单的多人聊天功能。
socket简介:
网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket。
建立网络通信连接至少要一对端口号(socket)。socket本质是编程接口(API),对TCP/IP的封装,TCP/IP也要提供可供程序员做网络开发所用的接口,这就是Socket编程接口;HTTP是轿车,提供了封装或者显示数据的具体形式;Socket是发动机,提供了网络通信的能力。
WebSocket简介:
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后,你可以通过send()方法来向服务器发送数据,并通过onmessage事件来接收服务器返回的数据。
socket.io简介:
Socket.io是基于Nodejs生态,是做Nodejs所不能实现的WebSocket的库。
在某种程度上,socket.io就是websocket,其实socket.io与websocket不是一回事,websocket可以说是socket.io的一个子集,socket.io的底层实现其实有5种方式,websocket只是其中一种,只不过在默认的情况下,我们建立的socket.io连接,底层也是调用websocket的实例。
上面简单介绍了下 socket, WebSocket,socket.io 下面直接上代码(说明:这里不再搭建网站服务 ,会在前段时间 kao2.3.0 项目框架搭建 基础之上搭建一个简单的聊天服务)
聊天服务搭建:
在搭建服务之前我们需要先安装 socket.io
npm install socket.io --save
1. 在项目根目录下创建 chat.js 文件(和 app.js 同级目录)并写入一下内容
const app = require('http').createServer(); const io = require('socket.io')(app); let clientCount = 0; //记录房间人数 app.listen(3300); //建立连接 io.on('connection', function (socket) { clientCount++; socket.nickname = 'user' + clientCount; //发送广播 io.emit 和 socket.emit 发送消息 io.emit('enter', socket.nickname + '进来了'); //接受消息 socket.on('message',(data)=>{ io.emit('message', socket.nickname +' : ' +data ); }); //断开连接时 socket.on('disconnect',()=>{ io.emit('leave' ,socket.nickname + '走了'); }) });2. 在 views/home/index.html 文件中输入一下内容
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="/socket/socket.io.js"></script> <title>socket.io</title> </head> <body> <h1>聊天室</h1> <input type="text" id="sendTxt"> <button id="sendBtn">发送</button> <script> var socket = io('ws://localhost:3300'); function showMessage(str , type){ 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); } //单击发送消息 document.getElementById("sendBtn").onclick = function(){ var txt = document.getElementById("sendTxt").value; if(txt){ socket.emit('message',txt); } }; //接受消息 socket.on('enter', function (data) { showMessage(data , 'enter'); }); socket.on('message', function (data) { showMessage(data , 'message'); }); socket.on('leave', function (data) { showMessage(data , 'leave'); }); </script> </body> </html>
在上面引入的 socket.io.js 我们要去 socket.io官网 去找,加个 socket.io.js 文件链接。
好了就是这么简单,试试吧,我们这里需要启动两个文件
node bin/www //网站服务
node chat.js //聊天服务
在浏览器地址栏输入 127.0.0.1:3000
人活着,其实就是一种心态,你若觉得快乐,幸福无处不在;你为自己悲鸣,世界必将灰暗。
阅读排行
最新文章
联系方式
- 邮箱:m18811126599@163.com
- QQ:896956692