您的位置：首页 > Web前端 > Node.js

基于node的websocket学习笔记三:scoket.io基础与利用scoket.io构建聊天程序示例

2017-11-05 20:49 633 查看

一、socket.io基础

首先来看一下官方例子-

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webSocket</title>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
</head>
<body>
<script>
var socket=io('ws://localhost:3000');
socket.on('news',function(data){
console.log(data);
socket.emit('my other event',{
my:'data'
})
})
</script>

</body>
</html>

node服务端代码如下：

var app=require('http').createServer();
var io=require('socket.io')(app);

app.listen(3000);
io.on('connection',function(socket){
socket.emit('news',{
hello:'word'
});
socket.on('my other event',function(data){
console.log(data)
})
});

启动服务之后，我们可以打开控制台：

客户端可以收到服务端发送过来的信息，；服务端也可收到客户端发送过来的信息，。

可以通过最简单的socket.on()来接受我们的广播信息，第一个参数是接受定义的出发事件，第二个参数是接受参数的回调。这里出发的事件名称可以自己定义。socket.emit()，就是想链接的用户推送信息，也是接受两个参数，参数类型和socket.on()一模一样。我们客户端和服务端的通信，就是通过定义相同的出发事件来进行通信的。

在node服务端中。io.on('connection',function(socket){});这个语法是固定的，创建一个socket.io的链接，一下就是处理链接的逻辑。

这里有一篇文章对socket.io的常用API方法一下做简略介绍：
http://www.cnblogs.com/xiezhengcai/p/3956401.html
2、基于socket.io 搭建简单的聊天室程序

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webSocet</title>
<script src="../socket.io-1.4.5.js"></script>
</head>
<body>
<h1>Chat Room</h1>

<input type="text" id="sendTxt">
<button id="sendBtn">发送</button>

<script>
//建立连接
let socket = io('ws://localhost:3000/');

//发送信息给后端服务
document.getElementById('sendBtn').onclick = function () {
var text = document.getElementById('sendTxt').value;
if (text) {
socket.emit('message', text);
}
};

//进入聊天室
socket.on('enter', function (data) {
showMessage(data, 'enter')
});

//获得消息
socket.on('message', function (data) {
showMessage(data, 'message')
});

//离开聊天室
socket.on('leave', function (data) {
showMessage(data, 'leave')
});

//客户端渲染辅助函数
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);
}
</script>
</body>
</html>

node后端代码如下：

var app=require('http').createServer();
var io=require('socket.io')(app);

var port=3000;
var clientCount=0;//客户的个数
app.listen(port);

//开启socket.io的链接
io.on('connection',function(socket){
clientCount++;
socket.nickName='user'+clientCount;
//socket.emit()是想客户端发送信息，io.emit是想所有链接客户广播信息
io.emit('enter',socket.nickName+'comes in');

socket.on('message',function(str){
io.emit('message',socket.nickName+': '+str);
});

socket.on('disconnect',function(){
io.emit('leave',socket.nickName+' leave')
});
});

console.log('webSocket server listening on port '+port);

启动服务后，本地打开页面就可以访问了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： websocket node socket.io

相关文章推荐

新的分享

章节导航