socket.io 入門篇（一）

時間 2019-12-09

原文原文鏈接

本文原文地址：https://www.limitcode.com/detail/591b114bb1d4fe074099d9c9.html

前言

本篇介紹使用node.js模塊組件socket.io實現一個很是很是簡易的聊天案例。
本系列文章不對 socket.io 歷史背景作過多闡述，只會經過一個個的案例帶領你們進入socket.io的殿堂，增進小夥伴在socket.io實際開發中的基本使用。
socket.io 官網地址:https://www.socket.io
本篇案例使用到的node.js模塊組件：
express # 作爲 socket 通訊的依賴服務基礎
socket.io # socket 通訊基礎模塊javascript

源碼下載地址：http://pan.baidu.com/s/1mhPJHyghtml

項目文件結構

服務端

var http=require("http");
var express=require("express");//引入express
var socketIo=require("socket.io");//引入socket.io
var app=new express();
var server=http.createServer(app);
var io=new socketIo(server);//將socket.io注入express模塊
//客戶端 1 的訪問地址
app.get("/client1",function (req,res,next) {
    res.sendFile(__dirname+"/views/client1.html");
});
//客戶端 2 的訪問地址
app.get("/client2",function (req,res,next) {
    res.sendFile(__dirname+"/views/client2.html");
});
server.listen(8080);//express 監聽 8080 端口，由於本機80端口已被暫用
//每一個客戶端socket鏈接時都會觸發 connection 事件
io.on("connection",function (clientSocket) {
    // socket.io 使用 emit(eventname,data) 發送消息，使用on(eventname,callback)監聽消息
    //監聽客戶端發送的 sendMsg 事件
    clientSocket.on("sendMsg",function (data) {
        // data 爲客戶端發送的消息，能夠是 字符串，json對象或buffer
        // 使用 emit 發送消息，broadcast 表示 除本身之外的全部已鏈接的socket客戶端。
        clientSocket.broadcast.emit("receiveMsg",data);
    })
});

客戶端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客戶端1</title>
</head>
<body>
<label>聊天內容:</label><br/>
<textarea id="content" style="height: 200px; width:300px;"></textarea>
<br/>
<input  id="sendMsg" type="text"/>
<button id="btn_send">發送</button>

<!-- 首先引入 socket.io 客戶端腳本-->
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
 var socket = io.connect();//鏈接服務端，由於本機使用localhost 因此connect(url)中url能夠不填或寫 http://localhost
    // 監聽 receiveMsg 事件，用來接收其餘客戶端推送的消息
 socket.on("receiveMsg",function (data) {
        content.value+=data.client+":"+data.msg+"\r\n";
 });
 var content=document.getElementById("content");
 var sendMsg=document.getElementById("sendMsg");
 var btn_send=document.getElementById("btn_send");
 btn_send.addEventListener("click",function () {
        var data={client:"客戶端1",msg:sendMsg.value};
 //給服務端發送 sendMsg事件名的消息
 socket.emit("sendMsg",data);
 content.value+=data.client+":"+data.msg+"\r\n";
 sendMsg.value="";
 });

</script>

</body>
</html>

界面效果以下：java

1. socket.io 入門篇（三）
2. Socket.IO 入門
3. Socket.io 入門
4. socket.io入門
5. Node.js、Express、Socket.io 入門
6. Socket.io快速入門
7. 轉載：socket.io 入門
8. socket.io快速入門案例
9. socket.io入門示例參考
10. SpringBoot 第一篇：入門篇
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。