簡易socket.io demo

時間  2019-11-06
標籤 簡易 socket.io socket demo 欄目 系統網絡 简体版
原文   原文鏈接

一個簡易的聊天室demo

基於：css

  1. express
  2. socket.io

這幾天在學習socket.io，因此就寫一點本身的心得，分享一下。html

Q:socket.io能幹什麼？
A:socket.io能夠保證客戶端和服務器端間的實時通信。node

經過幾個簡單的步驟就能夠建立簡易的聊天室jquery

在index.js中：

1.首先咱們要引入express，借用express來規劃路由git

var express = require('express');
var app = express();

也能夠簡寫：github

var app = require('express')();

而後配置路由express

app.get('/',function(req,res){
  //code...
  res.send('welcome to chatroom');
});

2.引入http「骨架」，載入express實例瀏覽器

var server = require('http').createServer(app);

順手把監聽的端口給配了~服務器

server.listen(3000)

一般簡單能夠如上這麼寫，可是不是很好看，因此咱們還能夠作一些配置：app

var port = process.env.PORT || 3000;

server.listen(port,function(){
  console.log('server port on %d',port);
});

整理下：

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var port = process.env.PORT || 3000;

app.get('/',function(req,res){
  //code...
  res.send('welcome to chatroom');
});

server.listen(port,function(){
  console.log('server port on %d',port);
});

如今啓動server

node index.js

打開你最愛的瀏覽器，輸入

http://localhost:3000

一切順利的話，能夠看見
圖片描述

咱們繼續如今，咱們引入socket.io,並傳入http對象

var io = require('socket.io')(server);

（這裏個人理解是socket.io依賴於http，因此須要將http傳入socket.io）

如今咱們註冊一個鏈接

io.on('connection',function(socket){
  console.log('a user connected');
});

新建一個目錄public
public裏新建index.html,main.js,style.css文件

在index.html中：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

在</body>前，引入script

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>

如今咱們還須要引入main.js和style.css，這裏有個小細節，咱們回到以前的index.js文件中，配置一個路徑

app.use(express.static(__dirname + '/public'));

而且修改路由內容

app.get('/', function (req, res) {
    res.sendFile('index.html');
});

（因爲咱們在express中配置了public目錄的路徑，因此在public中的文件，咱們能夠直接用）

回到index.html中，繼續~

如今咱們就能夠愉快的引入style.css和main.js文件了

<link rel="stylesheet" href="style.css" type="text/css">

在此後引入

<script src="/socket.io/socket.io.js"></script>
<script src="main.js"></script>

引入完畢，添加html中的基本dom元素

<ul id="message"></ul>
<form action="">
    <input type="text" id="input"><button type="submit">Send</button>
</form>

在style.css中：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#message {
    padding: 20px;
    font: 20px Arial, Helvetica;
    width: 95%;
    list-style-type: none;
    margin: 10px auto;
    /*box-shadow: -3px 3px 5px #888;*/
    box-shadow:
    2px 0 3px #888,
    0 2px 3px #888,
    0 2px 3px #888,
    2px 0 3px #888;
    min-height: 300px;
    border-radius: 5px;
}

#messages li {
    padding: 10px 10px;
}

#messages li:nth-child(odd) {
    background: #eee;
}

form {
    background: #000000;
    padding: 5px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

#input {
    border: 0;
    padding: 5px 7px;
    width: 90%;
}

form button {
    width: 10%;
    background: rgb(130, 224, 255);
    border: none;
    padding: 5px;
}

如今我們的chatroom應該是醬紫的

圖片描述

如今試着多開幾個瀏覽器窗口，我們會發現控制檯會打印多個
「a user connected」的字樣

在main.js中：

var socket = io();

$('button[type=submit]').click(function(){
    socket.emit('chat message', $('#input').val());
    $('#input').val('');
    return false;
});

socket.on('chat message', function (data) {
    $('#message').append($('<li>').text(data));
});

這個socket能夠理解爲客戶端的通訊接口

var socket = io();

並對button添加了一個點擊事件，點擊後發射事件「chat message」，數據爲input裏的value，最後清空input。

$('button[type=submit]').click(function(){
    socket.emit('chat message', $('#input').val());
    $('#input').val('');
    return false;
});

這裏（客戶端）註冊了「chat message」的事件，來將data顯示在ul列表裏。

socket.on('chat message', function (data) {
    $('#message').append($('<li>').text(data));
});

如今咱們再回到index.js中：

修改以下：

io.on('connection', function (socket) {
    console.log('a user connected');

    socket.on('chat message', function (data) {
        io.emit('chat message',data);
    });
    socket.on('disconnect', function () {
        console.log('a user left');
    });
});

注意，咱們先註冊了一個服務器端的chat message事件(爲了接受客戶端的data)，而後發射了一個客戶端的chat message事件(爲了傳值給客戶端)，這兩個事件雖然名字相同，可是徹底是兩回事！

socket.on('chat message', function (data) {
        io.emit('chat message',data);
    });

總覽

socket.io說白了就是在客戶端與服務器端間來回通訊，整明白誰是誰就好理解了。

index.js代碼：

var express = require('express');
var app = express();
var server  = require('http').createServer(app);
var io = require('socket.io')(server);
var port = process.env.PORT || 3000;

app.use(express.static(__dirname + '/public'));

app.get('/', function (req, res) {
    res.sendFile('index.html');
});

io.on('connection', function (socket) {
    console.log('a user connected');

    socket.on('chat message', function (data) {
        io.emit('chat message',data);
    });
    socket.on('disconnect', function () {
        console.log('a user left');
    })
});

server.listen(port, function () {
    console.log('server start on port : %d',port);
});

main.js代碼：

var socket = io();

$('button[type=submit]').click(function(){
    socket.emit('chat message', $('#input').val());
    $('#input').val('');
    return false;
});

socket.on('chat message', function (data) {
    $('#message').append($('<li>').text(data));
});

index.html代碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>socket.io chatroom</title>
    <link rel="stylesheet" href="style.css" type="text/css">

</head>
<body>

<ul id="message"></ul>
<form action="">
    <input type="text" id="input"><button type="submit">Send</button>
</form>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="main.js"></script>
</body>
</html>

style.css代碼：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#message {
    padding: 20px;
    font: 20px Arial, Helvetica;
    width: 95%;
    list-style-type: none;
    margin: 10px auto;
    /*box-shadow: -3px 3px 5px #888;*/
    box-shadow:
    2px 0 3px #888,
    0 2px 3px #888,
    0 2px 3px #888,
    2px 0 3px #888;
    min-height: 300px;
    border-radius: 5px;
}

#messages li {
    padding: 10px 10px;
}

#messages li:nth-child(odd) {
    background: #eee;
}

form {
    background: #000000;
    padding: 5px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

#input {
    border: 0;
    padding: 5px 7px;
    width: 90%;
}

form button {
    width: 10%;
    background: rgb(130, 224, 255);
    border: none;
    padding: 5px;
}

新人第一篇博客，若有不足多多包涵，理解有誤之處望指正，謝謝。
github:qianjiahao
本文參考自socket.io

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程